Go to the page after authenticating with React Router v4
I am trying to navigate to app.js from login.js on successful authentication. I was able to do this relatively easily using v3 router and history.html. I'm not sure how to navigate through the pages using v4 router as their methodology seems to be very different and the previous method I used no longer works. I tried to link to this post Route programmatically in React-Router v4 , but the suggestions didn't work for me. Any advice on how I can move pages in my application using v4?
This is an electronic application
index.js
import { HashRouter as Router } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Login from './screens/Login';
import App from './App';
const Application = () => (
<Router>
<App />
</Router>
);
ReactDOM.render(<Application />, document.getElementById('root'));
Login.js
'use strict';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { Route, Router } from 'react-router-dom';
import { matchPath, withRouter, browserHistory} from 'react-router';
class Login extends React.Component{
constructor(context){
super(context);
this.state = {
email:'',
password:'',
err:'',
loader: 0
};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
focusEmptyInput(){
//Focus prvog praznog inputa
for (var ref in this.refs) {
if(this.state[ref] === ''){
this.refs[ref].focus();
break;
}
}
}
handleNameChange(e){
this.setState({name: e.target.value});
}
handleEmailChange(e){
this.setState({email: e.target.value});
}
handlePasswordChange(e){
this.setState({password: e.target.value});
}
handleSubmit(e){
e.preventDefault();
const email = this.state.email.trim();
const password = this.state.password.trim();
//Provjeri prazne inpute i focus na prvi prazan
if((email === '')||(password === '')){
this.setState({ err: 'All fields are required.'});
this.focusEmptyInput();
return;
}
this.setState({ err: ''});
/** AJAX REST calls............ **/
const userInfo = {
email: email,
pass: password
};
this.setState({ loader: 100});
var jsforce = require('jsforce');
var conn = new jsforce.Connection({
oauth2 : {
// you can change loginUrl to connect to sandbox or prerelease env.
loginUrl : 'https://test.salesforce.com',
clientId : 'empty',
clientSecret : 'empty',
redirectUri : 'https://test.salesforce.com/services/oauth2/token',
}
});
conn.login(email, password, function(err, userInfo) {
if (err) { return console.error(err,email,password);
}
// Now you can get the access token and instance URL information.
// Save them to establish connection next time.
var token = conn.accessToken;
console.log(conn.accessToken);
console.log(conn.instanceUrl);
//exports.token = conn.accessToken
sessionStorage.setItem("token", token);
console.log("User ID: " + userInfo.id);
console.log("Org ID: " + userInfo.organizationId);
// ...
// I would like to be able to redirect to app.js
browserHistory.push('../app.js')
})
}
render(){
return (
<div className="login-page">
<div className="wrapper">
<form className="login-form" onSubmit={this.handleSubmit}>
<div className="title">
<h1>Login</h1>
<p>Please enter your login informations.</p>
</div>
<div className={(this.state.err === "") ? "hidden" : "error-message fadeIn"}>
<p>{this.state.err}</p>
</div>
<input
type="text"
ref="email"
className="form-control"
value={this.state.email}
onChange={this.handleEmailChange}
placeholder="Email"
/>
<input
type="password"
ref="password"
className="form-control"
value={this.state.password}
onChange={this.handlePasswordChange}
placeholder="Password"
/>
<button type="submit" className="btn">Login</button>
</form>
</div>
</div>
);
}
}
export default Login;
app.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { matchPath, withRouter } from 'react-router';
import {
Window,
TitleBar,
NavPane,
NavPaneItem,
} from 'react-desktop/windows';
import { Home, Settings } from './screens';
import * as Icons from './assets/icons';
const routes = [{
path: '/',
exact: true,
title: 'Home',
icon: Icons.welcomeIcon,
component: Home,
}, {
path: '/settings',
title: 'Settings',
icon: Icons.formIcon,
component: Settings,
}];
class App extends Component {
static defaultProps = {
theme: 'dark',
color: '#cc7f29',
}
render() {
const { replace, location, theme, color } = this.props; // eslint-disable-line
return (
<Window theme={theme} color={color}>
<TitleBar title="My Windows Application" controls />
<NavPane openLength={200} push theme={theme} color={color}>
{routes.map(route => (
<NavPaneItem
key={route.path}
title={route.title}
icon={route.icon}
selected={Boolean(matchPath(location.pathname, route.path, {
exact: route.exact, strict: route.strict,
}))}
onSelect={() => {
replace(route.path);
}}
color={color}
background="#ffffff"
theme="light"
padding="10px 20px"
push
>
<Route exact={route.exact} path={route.path} component={route.component} />
</NavPaneItem>
))}
</NavPane>
</Window>
);
}
}
export default withRouter(App);
+3
source to share
2 answers
I was able to work correctly with Router v4 by following the following entries.
class Login extends React.Component{
constructor(){
super();
this.state = {
redirect: false
};
this.handleSubmit = this.handleSubmit.bind(this);
In my login function I used this
handleSubmit(){
// On Success do this...
this.setState({
redirect: true
})
}.bind(this))
}
And then in the render function.
render(){
if (this.state.redirect) {
return <Redirect to="../app.js" />;
}
return (
</div>
<button type="submit" onClick={this.handleSubmit} className="btn">Login</button>
</div>
);
}
}
+4
source to share
You can wrap your login component in withRouter () . This provides your login component with multiple props, one of which is history .
Then you can do something like this:
handleSubmit(){
this.props.history.push('/your-new-location');
}
Also, I noted that you can use arrow functions, but still bind functions in the constructor to this?
You can link your functions like this:
class Something extends Component {
boundFunction = () => {
//You can use this here.
}
}
+2
source to share