Reactjs 使用React Router导航到路径时，组件状态值将重置为默认值

我使用的是React-Routerv4，当我使用登录表单登录时，我使用函数

setUserLogin

从子组件登录将应用组件状态值

isUser

设置为true，登录后我可以在控制台中正确调试。我还指定，如果我迁移到

/login

路径，如果用户已经登录（

isUser

为

true

），它将检查状态中的

isUser

值以迁移到

/home page

）。但现在，当我在浏览器中输入

/login

时，该值会自动更改为默认值

false

，并显示登录页面而不是主页。我是新来的，所以我是不是错过了什么？ 以下是代码片段：

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'));

从“React”导入React；
从“react dom”导入react dom；
导入“物化css/bin/materialize.css”
导入“MaterializeCSS/bin/materialize.js”；
从“react Router dom”导入{BrowserRouter as Router，Route，Redirect}；
从“./components/login”导入{LoginForm}；
从“./components/Home”导入{Home}；
从“./components/Main”导入{Main}；
从“./components/Room”导入{Room}；
导入“物化css”；
导入“物化css/js/toasts”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
isUser:false
}
this.setUserLogin=this.setUserLogin.bind（this）；
}
setUserLogin（）{
this.setState（{isUser:true}）；
}
render（）{
返回
(
this.state.isUser？：
)} />
};
}
ReactDom.render（，document.getElementById（'app'））；

如果我了解您的情况，您是否希望在浏览器中手动更改URL时，您的状态会保持不变？如果您想要这样做，您必须将一些变量存储在持久性存储（如localStorage）中，并在组件生命周期的某个点对其进行检查：构造函数、componentDidMount

---

手动更改浏览器位置时，所有内容都将重新启动，包括状态，整个页面将重新下载（或从缓存中读取）。

这是否意味着当我更改url时，所有组件中的所有状态都将丢失，除非我将其保存在本地存储中？不应该至少重新初始化最顶层的应用程序组件吗？我认为react（或任何JS）都无法拦截浏览器url中的更改。React router可以在应用程序内部使用更改URL（而不是手动更改URL）时处理此问题。登录是一种典型的情况，在这种情况下，您必须保存一些东西：令牌、会话id。。。其他状态属性必须在构造函数中重新计算。