While navigation to a path using React Router, the component state value gets reset to default

Question

I'm using React-Routerv4 , and when I login using the login form , i set the app component state value isUser to true from child component login using function setUserLogin, which i can debug correctly in the console after logging in. Also I have specified , that if i migrate to /login path ,it checks isUser value in state to migrate to /home page if user is already logged in(isUser is true) . But that value is now automatically changed to default value false , when i enter /login in the browser and it shows login page instead of home page. Im new to React , so am I missing something here? Here is the code snippet :

import React from 'react';
import ReactDom from 'react-dom';
import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js';
import {BrowserRouter as Router, Route , Redirect} from 'react-router-dom';
import {LoginForm} from './components/login';
import {Home} from './components/home';
import {Main} from './components/main';
import {Room} from './components/room';
import "materialize-css";
import 'materialize-css/js/toasts';


class App extends React.Component {
    constructor(props){
        super(props);
        this.state={
            isUser : false
        }
        this.setUserLogin = this.setUserLogin.bind(this);
    }
    setUserLogin(){
        this.setState({isUser:true});
    }
    render() {
        return <Router>
            <div>
                <Route exact path="/" component={Home}/>
                <Route path="/login" render={(props)=>(
                    this.state.isUser ? <Redirect to="/home" /> : <LoginForm history={props.history} setUserLogin = {this.setUserLogin}/>
                )} />
                <Route path="/home" component={Main}/>
                <Route path="/room" component={Room}/>
            </div>
        </Router>
    };
}
ReactDom.render(<App/>, document.getElementById('app'));

marcm · Accepted Answer · 2017-06-07 12:10:15Z

2

If I understand your situation, do you expect your state to persist when you manually change your URL in the browser? If you want this, you'll have to store some variable in persistent storage (like localStorage) and check it at some point of component life cycle: constructor, componentDidMount...

When you manually change your browser location, everything restarts including the state, the whole page is redownloaded (or read from cache).

answered Jun 7, 2017 at 12:10

marcm

1919 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arpit Srivastava Over a year ago

Does this mean when i change the url , all my states in all components will be lost unless I save it in local storage? Shouldnt atleast the topmost level app component not reinitialize?

marcm Over a year ago

I don't think react (or any JS) can intercept a change in your browser url. React router can handle this when the URL is changed inside the app using a <Link>, but not a manual change in the URL. Login is the typical situation where you'll have to persist something: a token, a session id... Other state attributes will have to be recomputed in the constructor.

Collectives™ on Stack Overflow

While navigation to a path using React Router, the component state value gets reset to default

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related