Как я могу аутентифицировать логин пользователя в реагировать JS через маршрутизатор?

Question

Я пытаюсь получить аутентификацию пользователя на странице входа в систему реагировать js, но каждый раз, когда я нажимаю на кнопку, это выдает ошибку (TypeError: _auth__WEBPACK_IMPORTED_MODULE_1 __. Default.logout не является функцией) Я хочу, чтобы мой пользователь принималцелевой странице всякий раз, когда нажимается кнопка выхода из системы, и я также хочу, чтобы она оставалась на той же странице, пока не будет нажата кнопка выхода из системы, как это можно сделать .?

Мой код аутентификации

  import React from 'react';

    class Auth {
        constructor() {
            this.authenticated = false;
        }
           login (e) {
               this.authenticated = true;
               e();
           }

           logout (e) {
               this.authenticated = false;
               e();
           }
           isAuthenticated() {
               return this.authenticated;
           }
    }

    export default Auth; 

Моя кнопка

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


    export const LogoutPage = (props) => {
        return (
            <div className= "App">
                <h1>Logout</h1>
                    <br/>
                    <button  onClick = {
                           () => {
                            auth.logout( () => {
                                props.history.push('/')
                            });
                           }


                    }>Logout</button>


            </div>
        )
    } 

Мои маршруты

import React, { Component } from 'react';
    import {Route} from 'react-router-dom';
    import {LandingPage} from './landingpage'
    import {LogoutPage} from './logoutpage'
    import {ProtectedRoute} from './protectedroute'


    export const App = () => {
        return (
            <div className = 'App-logo'>
                <Route exact path = '/' component = {LandingPage}></Route>
            <ProtectedRoute path = '/log' component = {LogoutPage}></ProtectedRoute>
            </div>

        )
    }

Защищенный маршрут

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

    export const ProtectedRoute = ({component: Component, ...rest}) => {
           return (
               <Route  {...rest}
               render= {props => {
                   if (auth.isAuthenticated ()) {
                    return <Component {...props} />
                   }
                  else {
                      return (
                          <Redirect
                          to= {{
                            pathname: '/',
                            state: {
                                from: props.location
                            }
                          }

                          }


                          />
                      )
                  }
               }
            }></Route>

           );
    };