I'm creating a app where I Login/Logout have a home, about, profile etc. Its using react router as well, however when I log in I want the app to transition to the last route it was at, it works sometimes for example if I visit about, then login and log in, it takes me back to about, however if i visit the app root '/' and then go to login, and login, it takes me back to the first page I was ever on (which would be the default page when you open your browser or tab). I wrote it like this, and i think the way I may have done it is very naive. I did it in the render method which is called alot. I think it has sometime do with that but am not entirely sure. Was hoping for some advice, code:
constructor(props, context) {
super(props, context);
this.state = UserStore.getState();
this.context = context;
}
render() {
console.log(this.state.user.get('authenticated'));
if(this.state.user.get('authenticated')){
this.context.history.goBack();
}
return (
//stuff
)
Should i push a state into history every route i visit, I also noticed if I wait a bit before logging in sometimes it performs correctly, maybe it adds it into history a little late or it takes some time? Not entirely sure how to go about debugging it, console.log(this.context.history) just shows a bunch of its functions i guess I might be looking in the wrong place?
routes:
export default (
<Route component={App}>
<Route path="/" component={Dashboard} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
<Route path="about" component={About} />
<Route path="profile" component={Profile} onEnter={requireAuth}/>
<Route path="login" component={LoginSignupPage} />
<Route path="channels" component={Channels} />
</Route>
);
injecting react-router
import React from 'react';
import ReactDOM from 'react-dom';
import Iso from 'iso';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router } from 'react-router';
import alt from 'altInstance';
import routes from 'routes.jsx';
import injectTapEventPlugin from 'react-tap-event-plugin';
window.React = React;
injectTapEventPlugin();
/*
* Client side bootstrap with iso and alt
*/
Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
ReactDOM.render(<Router history={createBrowserHistory()} children={routes} />, container);
});
<Route path="/" component={App}>
<IndexRedirect to='dashboard' />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
<Route path="about" component={About} />
<Route path="profile" component={Profile} onEnter={requireAuth}/>
<Route path="login" component={LoginSignupPage} />
<Route path="channels" component={Channels} />
</Route>
Change the Route like this may solve your problem. the path "/" should be a parent level route of "login" but not the same level
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With