Javascript 我能'；我似乎没有找到我的私人工作路线

我觉得这很简单，但我还是一个React的初学者，希望能有一些见解。我有一个私有路由设置和一个来自App.js状态的authToken，我通过道具发送。如果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>   
        );
    }

从“react dom”导入ReactDOM；
从“./HomeNavBar.js”导入HomeNavBar
从“./Login.js”导入登录名
从“./Register.js”导入寄存器
导入“../index.css”；
从“../Routes.js”导入路由；
从“axios”导入axios；
从“qs”进口qs；
从“./HomePage.js”导入主页；
从'react router dom'导入{Redirect}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={apiResponse:“”，
电邮：“，
密码：“”，
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；
}
异步handleLogin（）{
if（this.state.email==“”| | this.state.password==“”）{
警告（“请填写表格”）；
}
否则{
const{email，password}=this.state；
常量用户={
电子邮件，
密码，
};
var userId=0；
等待axios
.post（'http://localhost:9000/api/getUserLogin，用户）
.然后（功能（响应）{
控制台日志（响应）；
userId=response.data.userId；
//警报（用户标识）；
})
.catch（错误=>{
控制台日志（错误响应）；
});
if（userId！=0）{
this.state.validUser=true；
}
如果（本州validUser）{
this.state.authToken=true；
}
否则{
this.state.authToken=false；
}
}
}
render（）{
返回(
{this.state.apiResponse}
);
}

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

从'react Router dom'导入{Switch，Route，Router，withRouter}；
/**
*在此处导入所有页面组件
*/
从“./components/App”导入应用程序；
从“./components/Login.js”导入登录名；
从“./components/Register.js”导入寄存器；
从“./components/HomePage.js”导入主页；
从“/privateRoutes.js”导入PrivateRoute；
/**
*所有的路线都在这里。
*添加新路由后，不要忘记导入上面的组件。
*/
导出默认功能路由（道具）{
返回(
);
}

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;

从'react router dom'导入{Route，Redirect}；
常量PrivateRoute=（{component:Node，authToken，…rest}）=>(
authToken(
) : (
)
}
/>
);
导出默认私有路由；

所以我认为改变组件的状态会导致渲染。例如，我认为“this.state.authToken=false；”会重新呈现组件，这让我对为什么我的auth标记没有正确更新感到困惑，或者什么都没有。然后我学会了使用“this.setState”来赋值。因此，我所有的状态值都起作用了，我的私有路径现在也起作用了