Переход на панель инструментов после входа в систему и при перезагрузке браузера

Question

Я новичок в React Router и Private Route.У меня были две проблемы, которые я пытался выяснить.1. Страница не перешла на страницу панели инструментов после входа в систему. Она просто ничего не делала.Однако, если я набрал путь (/ dashboard) в URL-адресе напрямую, он сработал и смог успешно выйти из системы.2. Когда я вошел в систему и перезагрузил браузер, он должен перейти на страницу панели инструментов, но это не так.

Пожалуйста, ознакомьтесь с приведенными ниже кодами и помогите мне решить две вышеуказанные проблемы.

Большое спасибо.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import firebase, { auth, provider } from './Firebase';

auth.onAuthStateChanged((user) => {
    ReactDOM.render(
        <App user={user} />, 
        document.getElementById('root')
    );
});

// App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Routes from './Routes';

const App = (props) => {

    return (
        <BrowserRouter>
            <Routes {...props} />
        </BrowserRouter>
    )
}

export default App; 

// Routes.js 

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import PublicRoute from './components/auth/PublicRoute';
import PrivateRoute from './components/auth/PrivateRoute';
import Home from './components/pages/home';
import Dashboard from './components/pages/dashboard';

const Routes = (props) => {
    
    return (
        <Switch>
            <Route {...props} path="/" exact component={Home} />
            <PrivateRoute {...props} path="/dashboard" exact component={Dashboard} isAuthenticated={props.user} />
        </Switch>
    )
}

export default Routes; 

// Home.js

import React, { Component } from 'react';
//import './App.css';
import firebase, { auth, provider } from '../../Firebase';
import { BrowserRouter, Route } from 'react-router-dom'; 

class Home extends Component {


    onLogin = () => {
        auth.signInWithEmailAndPassword("test@gmail.com", "xxxxx")
            .then((response) => {
               
              // navigate to dashboard
                this.props.history.push('/dashboard');
            })
            .catch(error => {
                console.log(error); 
            })
    }



    render() {

        return (
            <div className="main-container">
                <h1>Home...</h1>
                <button type="text" onClick={this.onLogin}>Log In</button>
            </div>
        )
    }
}


export default Home; 

// Dashboard.js

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

class Dashboard extends Component {

    logOut = () => {
        auth.signOut()
            .then(() => {
                
                // navigate to home page
                
            });
    }

    render() {
        return(
            <div>
                <h1>Dashboard</h1>
                    <button type="text" onClick={this.logOut}>Log Out</button>
               
            </div>
        )
    }
}

export default Dashboard;