我似乎无法让我的 React 私人路线工作

Question

我觉得这很简单，但我希望能有一些见解，因为我还是 React 的初学者。我有一个私有路由设置和一个来自 App.js 状态的 authToken，我通过 props 发送。如果 authToken 为 true，则私有路由应该转到 /HomePage，但每次我使用有效凭据按下登录按钮时，它都会将我重定向到 /login。

App.js

import ReactDOM from 'react-dom';
import HomeNavBar from './HomeNavBar.js'
import Login from './Login.js'
import Register from './Register.js'
import '../index.css';
import Routes from '../routes.js';
import axios from 'axios';
import qs from 'qs';
import HomePage from './HomePage.js';
import {Redirect} from 'react-router-dom';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { apiResponse: "",
          email: "",
          password: "",
          authToken: false
        };
        this.setEmail = this.setEmail.bind(this);
        this.setPass = this.setPass.bind(this);
        this.handleRegister = this.handleRegister.bind(this);
        this.handleLogin = this.handleLogin.bind(this);
        axios.defaults.withCredentials = true;
    }


    async handleLogin(){

        if(this.state.email == "" || this.state.password == "") {
            alert("Please complete form.");
        }
        else{

            const{email, password} = this.state;

            const user = {
                email,
                password,
            };

            var userId = 0;
            await axios
                .post('http://localhost:9000/api/getUserLogin', user)
                .then(function (response){
                    console.log(response);
                    userId = response.data.userId;
                    //alert(userId);
                })
                .catch(err => {
                    console.log(err.response);
                });
            if(userId != 0){
                this.state.validUser = true;
            }

            if(this.state.validUser){
                this.state.authToken = true;
            }
            else{
                this.state.authToken = false;
            }
        }
    }

    render() {
        return (
            <div className="HomeNavBar">
                <Routes  password = {this.state.password} email = {this.state.email} setPass = {this.setPass} setEmail = {this.setEmail} handleRegister = {this.handleRegister} handleLogin = {this.handleLogin} authToken = {this.state.authToken}/>
                <p className="App-intro">{this.state.apiResponse}</p>      
            </div>   
        );
    }

Routes.js

import { Switch, Route, Router, withRouter } from 'react-router-dom';

/**
 * Import all page components here
 */
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
import HomePage from './components/HomePage.js';
import PrivateRoute from './privateRoutes.js';

/**
 * All routes go here.
 * Don't forget to import the components above after adding new route.
 */
 export default function Routes(props) {
    return (
        <div>
        <Switch>
          <Route path='/Login'>
        <Login setPass = {props.setPass} setEmail = {props.setEmail} handleLogin = {props.handleLogin} />
      </Route>

          <Route path='/Register'>
        <Register setPass = {props.setPass} setEmail = {props.setEmail} handleRegister = {props.handleRegister} />
      </Route>

      <PrivateRoute authToken={props.authToken} path='/HomePage' component={HomePage} />

      <Route path='/'> 
        <Login setPass = {props.setPass} setEmail = {props.setEmail} handleLogin = {props.handleLogin}  />
      </Route> 

        </Switch>
        </div>
    );
}

privateRoutes.js

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({component: Node, authToken, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      authToken ? (
        <Node {...props} />
        ) : (
        <Redirect
          to={{
            pathname: "/Login",
            state: {from: props.location}
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

Answer 1

所以我认为改变组件的状态会导致渲染。例如，我认为“this.state.authToken = false;”会重新渲染导致我对为什么我的身份验证令牌没有正确更新或其他任何事情感到困惑的组件。然后我了解到我需要使用“this.setState”来分配值。因此，我所有的状态值都有效，我的私人路线现在有效。