Как перенаправить на компонент входа в App.js, когда пользователь не вошел в систему

Question

Если пользователь не вошел в систему, мне нужно перенаправить пользователя на страницу входа Я использую Firebase для входа в систему. Код успешно утешает RRR, но перенаправление не работает.

Но выдает следующие ошибки:

Ошибка 1)

TypeError: "this.props.history не определено"

Ошибка 2)

InvalidStateError: В базе данных была предпринята операция мутации это не позволило мутации.

Мой файл App.js выглядит так:

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

import Routes from './Routes/Routes';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    }
  }

  componentDidMount() {
    this.authListener();
  }

  authListener()
  {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user });
      } else {
        console.log('RRR');
        this.setState({ user: null });
        if(window.location.pathname !== '/') {
            this.props.history.push('/');
        }
      }
    });
  }

  render() {
    return (
        <Routes/>
    );
  }
}

export default App;

Мой файл маршрута выглядит следующим образом:

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Login from '../Components/Login';
import Dashboard from '../Components/Dashboard';

export default class Routes extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route exact path="/dashboard" component={Dashboard} />
                </Switch>
            </BrowserRouter>
        );
    }
}