使用 React Router 导航到路径时，组件状态值被重置为默认值 [英] While navigation to a path using React Router, the component state value gets reset to default

问题描述

我正在使用 React-Routerv4，当我使用登录表单登录时，我使用函数 setUserLoginisUser 设置为 true>，我可以在登录后在控制台中正确调试.另外我已经指定，如果我迁移到 /login 路径，它会检查 isUser 状态中的值以进行迁移到 /home page 如果用户已经登录(isUser is true) .但该值现在自动更改为默认值 false ，当我在浏览器中输入 /login 并显示登录页面而不是主页时.我是 React 的新手，所以我在这里遗漏了什么吗?这是代码片段:

从'react'导入React；从 'react-dom' 导入 ReactDom；导入'materialize-css/bin/materialize.css'导入'materialize-css/bin/materialize.js';从react-router-dom"导入 {BrowserRouter 作为路由器、路由、重定向}；从 './components/login' 导入 {LoginForm}；从'./components/home'导入{Home}；从'./components/main'导入{Main}；从'./components/room'导入{Room}；导入materialize-css"；导入'materialize-css/js/toasts'；类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.state={isUser : 假}this.setUserLogin = this.setUserLogin.bind(this);}设置用户登录(){this.setState({isUser:true});}使成为() {返回<路由器><div><路由精确路径="/" component={Home}/><Route path="/login" render={(props)=>(this.state.isUser ?<重定向到="/home"/>:<LoginForm history={props.history} setUserLogin = {this.setUserLogin}/>)}/><Route path="/home" component={Main}/><Route path="/room" component={Room}/>

</路由器>};}ReactDom.render(, document.getElementById('app'));

解决方案

如果我了解您的情况，您是否希望在浏览器中手动更改 URL 时保持状态?如果你想要这个，你必须在持久存储中存储一些变量(如 localStorage)并在组件生命周期的某个时刻检查它:构造函数、componentDidMount...

当您手动更改浏览器位置时，包括状态在内的一切都会重新启动，整个页面都会重新下载(或从缓存中读取).

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

解决方案

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).

这篇关于使用 React Router 导航到路径时，组件状态值被重置为默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！