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

时间:2017-06-07 11:49:32

标签: reactjs react-router

我正在使用React-Routerv4,当我使用登录表单登录时,我使用函数setUserLogin从子组件登录将app组件状态值/login设置为true登录后可以在控制台中正确调试。我还指定,如果我迁移到isUser路径,它会检查状态中的/home page值,如果用户已经登录,则迁移到isUser in(truefalse)。但是,当我在浏览器中输入/login并且它显示登录页面而不是主页时,该值现在自动更改为默认值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的新手,所以我在这里遗漏了什么? 以下是代码段:

/usr/local/

1 个答案:

答案 0 :(得分:1)

如果我了解您的情况,您是否希望在浏览器中手动更改网址时您的州仍然存在?如果你想要这个,你必须在持久存储中存储一些变量(比如localStorage)并在组件生命周期的某个时刻检查它:constructor,componentDidMount ......

当您手动更改浏览器位置时,所有内容都会重新启动,包括状态,整个页面将被重新加载(或从缓存中读取)。