React Router работает только несколько раз

В настоящее время я экспериментирую с использованием React Router на создаваемом мной веб-сайте. Я столкнулся с использованием React Router для навигации по моему веб-сайту, а также для других вещей, таких как чтение значений параметров и т. Д. Однако я нахожу это немного запутанным. Видите ли, на моей странице входа администратора маршрутизатор работает только несколько раз, но я действительно не понял, когда и когда нет. Я использую this.props.history.push ('/ admin / dashboard'), и считаю, что это правильный способ сделать это. В настоящее время это моя установка в index.js, где у меня есть все мои маршруты:

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import './css-styling/styling.css'
import Frontpage from './Frontpage';
import { BrowserRouter, Route, Router, Switch, Link, NavLink } from 'react-router-dom';
import AdminLogin from './Admin-Login';
import AdminWelcome from './Admin-Welcome';
import Authentication from './components/Authentication';

const websiteRoutes = (
    <Router history={history}>
        <div>
            <Switch>
                <Route path="/" component={Frontpage} exact={true}/>
                <Route path="/admin" component={AdminLogin} exact={true}/>
                <Authentication props={this.props}>
                <Route path="/admin/welcome" component={AdminWelcome} exact={true}/>
                </Authentication>
            </Switch>
        </div>
    </Router>
);

var appRoot = document.getElementById('root');
registerServiceWorker();
ReactDOM.render(websiteRoutes, appRoot);

И каждый «компонент» имеет такую ​​структуру:

import React from 'react';
import ReactDOM from 'react-dom';
import AdminHeader from './components/Admin-Header';
import AdminPanelLogin from './components/Admin-Panel-Add-News';
import history from './components/History';

class AdminLogin extends React.Component{

    render() {
        return(
            <div>
            <AdminHeader />
            <AdminPanelLogin />
            </div>
        );
    }

}

export default AdminLogin;

В чем, кажется, проблема? Я пробовал много разных решений, но безуспешно. Один из них создавал эту «глобальную историю», которую, как вы можете видеть, я импортировал в свой класс AdminAddNews.

Как правильно использовать React Router в моем случае?

Кстати; History.push происходит внутри моего компонента AdminPanelLogin, где код выглядит следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';
import { Icon, Input, Button, Message } from 'semantic-ui-react';
import {auth} from './Firebase';
import {NotificationContainer, NotificationManager} from 'react-notifications';
import { withRouter, Redirect } from 'react-router-dom';
import history from './components/History';


class AdminLogin extends React.Component{

constructor(props){
    super(props);

    this.handleLogin = this.handleLogin.bind(this);
    this.clickLogin = this.clickLogin.bind(this);
    this.performLogin = this.performLogin.bind(this);
}


handleLogin(e){
    this.setState({
        [e.target.name]: e.target.value
    });
}


clickLogin(e){
    e.preventDefault();
    auth.signInWithEmailAndPassword(this.state.email, this.state.password).then(() => {
        this.props.history.push('/admin/dashboard');
    }).catch((error)=> {

    })
}

    render() {
        return (
            <HTMLGOESHERE>
        );
    }
}

export default AdminLogin;