Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

goBack() taking me all the way to first entry instead of where I want to be

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);
});
like image 210
Karan Avatar asked Dec 01 '15 15:12

Karan


1 Answers

<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

like image 69
Zhang Chao Avatar answered Nov 08 '22 23:11

Zhang Chao