如文档所述，React路由器身份验证不起作用

Question

我想验证一些路由，因此我遵循react-router-dom网站上的文档，唯一的区别是我使用了单独的组件，而不是一个充满类的大文件，但是它不起作用。

这是我的app.js文件

import React, { Component } from 'react';
import 'react-notifications/lib/notifications.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// Component
import Login from 'layouts/login';
import Home from 'layouts/home';
import Register from 'layouts/register';

// private route
import PrivateRoute from 'utils/private-routes';

// auth
import auth from 'utils/auth';

class App extends Component {

  render() {
    return (
      <Router>
        <div className="App">
          <Switch>
            <Route path="/" component={ Home } exact />
            <Route path="/login" component={ Login } />
            <PrivateRoute path="/register" component={ Register } />
          </Switch>
        </div>
      </Router>
    );
  }
}

我的login.js文件

import React, { Component } from 'react';
import { NotificationContainer, NotificationManager } from 'react-notifications';
import { withRouter, Redirect } from 'react-router-dom';
import auth from 'utils/auth';
import { post } from 'utils/api';

class Login extends Component {

  constructor(props) {

    super(props);

    this.state = { email : 'admin@admin.com', password : 'password', redirect : false }

  }

  handle_Input = (e) => {

    this.setState({ [e.target.id] : e.target.value })

  }

  login = async () => {

    let response = await post('api/users/login', { email : this.state.email, password : this.state.password } );

    response.hasOwnProperty('err') ? NotificationManager.error('Error', reqponse.err) :

    NotificationManager.success('Success', 'Logged In Successfully')

    auth.authenticate();

    await this.props.history.push('/register')

  }

  render() {

    return (
      <div className="page-background">
        <div className="login-box">
          <div className="login-content">
            <h3>Login To Dashboard</h3>
          </div>

          <div className="login-form">

              <div className="input-group ls-group-input">
                <input onChange={ this.handle_Input } className="form-control" autoComplete="off" id="email" type="text" placeholder="Username" />
                <span className="input-group-addon"><i className="fa fa-user"></i></span>
              </div>

              <div className="input-group ls-group-input">
                <input onChange={ this.handle_Input } type="password" placeholder="Password" className="form-control" autoComplete="off" id="password" />
                <span className="input-group-addon"><i className="fa fa-lock"></i></span>
              </div>


              <div className="input-group ls-group-input">
                <button onClick={ this.login } type="submit" className="btn btn-info">Login</button>
              </div>

          </div>
        </div>
        <NotificationContainer />
      </div>
    )
  }
}

export default withRouter(Login);

我的private-routes.js文件

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import auth from 'utils/auth';

const PrivateRoute = ({ component : Component, authenticated, ... rest, }) => {
  console.log(auth.is_authenticated);
  return (
    <Route { ...rest } render={ (props) => (
      auth.is_authenticated === true
      ? <Component { ...props } />
      : <Redirect to="/login" />
    ) } />
  )
}

export default PrivateRoute;

还有我的auth.js文件

const auth = {

  is_authenticated : false,

  authenticate : (cb) => {
    this.is_authenticated = true;
  },

  logout : () => this.is_authenticated = false,

}

export default auth;

我做了console.log(auth.is_authenticated)，除了auth.js文件内部，它似乎没有变化，但是即使如此，我还是直接使用auth.is_authenticated从文件中检查值。是这样吗？

为什么不起作用？