React - Маршрутизация в безопасном разделе сайта

Question

У меня есть private route настройка для маршрутизации со страницы входа на панель управления. Эта часть работает нормально. Сейчас я пытаюсь перейти на дочернюю страницу панели инструментов, которая также является private rout. Это не работает. Маршрутизация идет нормально, но когда маршрутизация завершена, переменная isAuthenticated возвращается в значение false и выводит пользователя из строя. Вот мой код:

auth.js:

const Auth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

export { Auth }

app.js:

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { Auth } from '../src/auth';

import Login from './LoginScreen/Login';
import adminDash from './AdminDash/AdminDash';
import workReqList from './AdminDash/WorkRequestViewScreen/WorkRequestView';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    Auth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login'
        }} />
  )} />
)

class App extends Component {
  render() {
    return (
      <div>
        <PrivateRoute path='/adminDash/workReqList' component={workReqList} />
        <PrivateRoute path='/adminDash' component={adminDash} />
         <Route exact path="/workReq" render={(props) => <WorkReq {...props}/>} />
        <Route exact path="/login" component={Login}/>
      </div>
    );
  }
}

export default App;

login.js:

import React, { Component } from 'react';
import { Redirect} from 'react-router-dom';
import { Auth } from '../auth';

import './Login.css';
import './molot.css';


class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToReferrer: false,
      isAdmin: false,
    };

    this.adminLogin = this.adminLogin.bind(this);

  }

  componentDidMount(){
    document.title = "Kashy Australia - About";
  }

  adminLogin = () => {
    Auth.authenticate(() => {
      this.setState(() => ({
        redirectToReferrer: true,
        isAdmin: true
      }))
    })
  }

  render() {

    const { admin } = this.props.location.state || { admin: { pathname: 

'/ adminDash'}} const {user} = this.props.location.state || {пользователь: {путь: '/ userDash'}}

    const { redirectToReferrer } = this.state

    if(this.state.isAdmin){
      if (redirectToReferrer === true) {
        return <Redirect to={admin} />
      }
    }

    return (
      <div>
        <div className='buttonCont'>
          <button size='lg' type='button' onClick= {this.adminLogin.bind(this)}>HIT IT!</button>
        </div>
      </div>
    );
  }
}

export default LoginScreen;

adminDash.js:

import React, { Component } from 'react';
import { Redirect} from 'react-router-dom';
import { Auth } from '../auth';

import './AdminDash.css';
import './molot.css';

class AdminDash extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToReferrer: false,
      isOpen: false,
    };
  }

  componentDidMount(){
    document.title = "Kashy Australia - Admin Dashboard";
  }

  goToWorkReqList = () => {
    Auth.authenticate(() => {
      this.setState(() => ({
        redirectToReferrer: true
      }))
    })
  }

  render() {

    const { workReqList } = this.props.location.state || { workReqList: { pathname: '/adminDash/workReqList', } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer === true) {
      return <Redirect to={workReqList} />
    }

    return (
      <div>
        <Navbar className="custNav navbar-inverse bg-primary" light expand="md"> 
          <NavbarBrand className='molotFont custNav'>Kashy</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='mr-auto' navbar>
              <NavItem className='custNav'>
                <NavLink className='custNav' href='' onClick={this.goToWorkReqList.bind(this)}>Work Requests</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

export default AdminDash;

WorkRequestView.js:

import React, { Component } from 'react';
import { Auth } from '../../auth';

class WorkRequestView extends Component {

  componentDidMount(){
    document.title = "Kashy Australia - View Work Requests";
    alert("HAZA! " + Auth.isAuthenticated);
  }

  render() {
    return (
      <div>

      </div>
    );
  }
}

export default WorkRequestView;

alert на приведенной выше странице предупреждает дважды. Когда-то это правда, чего я и ожидаю, но потом снова, но это неправда.

РЕДАКТИРОВАТЬ 1:

У меня были проблемы со стрельбой, и кажется, что страница adminDash визуализируется несколько раз. Я поместил серию предупреждений в и вокруг оператора if между render и return, и каждое предупреждение повторяется в цикле три раза, прежде чем появляется предупреждение от WorkRequestView.

Предупреждения от adminDash также появляются на странице login, когда я нажимаю кнопку входа в систему. Не знаю, является ли это основной причиной моей проблемы, но подумал, что я добавлю ее.