如何使反應 class 組件在登錄后保留其 state 並根據組件中當前可用的 state 更改可用路由？

Question

我正在開發一個簡單的反應應用程序。 我的目標是，在用戶登錄之前，我只想讓用戶訪問用戶/登錄和/用戶/注冊 URL。因此，在身份驗證時，我正在更改路由。 目前我被路由到 /projects 頁面（新路由填充在應用程序中）但是在刷新時我被重定向到 /user/login。 有沒有一種方法可以做到這一點而不在本地存儲中保存任何內容？ 誰能幫我解決這個問題？

import './App.css';
import LoginForm from './components/LoginForm/LoginForm'
import RegistrationForm from './components/RegistarationForm/RegistarationForm';
import Project from './components/Project/Project';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
    this.state={
      isUserAuthenticated: false
    };
    console.log('APP constructor');
   }
  

  // componentDidUpdate(prevProps) {
  //   console.log('update');
  // }

  authenticateUser=()=>{
    this.setState({
      isUserAuthenticated: true
    });
  }

  render(){
    var routes;
    if(!this.state.isUserAuthenticated){
      routes=<React.Fragment>
              <Route exact path="/user/login" ><LoginForm authenticateUser={this.authenticateUser}/></Route>
              <Route exact path="/user/register"><RegistrationForm /></Route>
              <Route
                render={() => <Redirect to={{pathname: "/user/login"}}/>}
              />
            </React.Fragment>;
    }else{
      routes=<React.Fragment>
              <Route exact path="/projects" ><Project /></Route>
              <Route
                render={() => <Redirect to={{pathname: "/projects"}}/>}
              />
            </React.Fragment>;
    }
    return (
      <Router>
        <Switch>
          {routes}
        </Switch>
      </Router>
    );
  }
}

export default App;

Answer 1

我是巴西人，因此我會說葡萄牙語，但我會使用翻譯來幫助您。

我真的不明白發生了什么，但我仍然認為您可以執行以下操作：

  render() {
    return (
      <Router>
        <Switch>
          {!this.state.isUserAuthenticated ? (
            <React.Fragment>
              <Route exact path="/user/login">
                <LoginForm authenticateUser={this.authenticateUser} />
              </Route>
              <Route exact path="/user/register">
                <RegistrationForm />
              </Route>
              <Route
                render={() => <Redirect to={{ pathname: "/user/login" }} />}
              />
            </React.Fragment>
          ) : (
            <React.Fragment>
              <Route exact path="/projects">
                <Project />
              </Route>
              <Route
                render={() => <Redirect to={{ pathname: "/projects" }} />}
              />
            </React.Fragment>
          )}
        </Switch>
      </Router>
    );
  }