javascript - reactjsルーティングが正しく機能しない

Question

シンプルなreactJsプロジェクトがあります。ダッシュボードによるログイン機能を備えています。

アプリケーションのエントリ ポイントである DashboardComponent があります。

DashboardComponent

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';

import '../css/sidemenu.css';
import LoginComponent from './LoginComponent';
import RegisterComponent from './RegisterComponent';
import ForgetPasswordComponent from './ForgetPasswordComponent';
import Main from './Main';

import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

class Dashboard extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Router History={customHistory}>
                    <div>
                        <Route exact path="/login" component={LoginComponent}/>
                        <Route exact path="/signup" component={RegisterComponent}/>
                        <Route exact path="/forget-password" component={ForgetPasswordComponent}/>
                        <Route exact path="/" component={Main}/>
                    </div>
                </Router>;
    }
}

export default Dashboard;

ログイン

ここでは、LoginComponent、ForgetPasswordComponent、RegisterComponent、および Main の Router を定義しました。

LoginComponent は、ユーザーのログイン画面とロジックに使用されます

login() {
    if(this.state.email) {
        if(this.state.password) {
            this.setState({
                errorMessage : ''
            });

            axios.post(ConstClass.BASE_URL + '/login', this.state).then((response) => {
                window.location.href = '/';
            }).catch((error) => {
                this.setState({
                    errorMessage : 'Invalid username and password.'
                });
            });

        }
    }
}.

メインは、ログインに成功した後、ユーザーがメインコンポーネントに入るために使用されます。ここでは、ProductListComponent、SettingsComponent、AddProduct、ViewProduct 用に別のルーターを定義しました。

Main.js

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';

import '../css/sidemenu.css';
import ProductListComponent from './ProductListComponent';
import SettingsComponent from './SettingsComponent';
import AddProduct from './AddProduct';
import ViewProduct from './ViewProduct';

import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

class Main extends Component {
    constructor(props) {
        super(props);

        this.randerDashboard = this.randerDashboard.bind(this);
        this.randerSettings = this.randerSettings.bind(this);
    }

    randerDashboard() {
        window.location.href ='/';
    }

    randerSettings() {
        window.location.href = '/settings';
    }

    render() {
        return <div className="row">
                <div className="col-lg-3 col-md-3">
                    <div className="nav-side-menu">
                        <div className="brand">Brand Logo</div>
                        <i className="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

                        <div className="menu-list">
                            <ul id="menu-content" className="menu-content collapse out">
                                <li onClick={this.randerDashboard}>
                                    <a>Dashboard</a>
                                </li>
                                <li onClick={this.randerSettings} className="collapsed">
                                    <a >Settings</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="col-lg-9 col-md-9">

                    </div>
                </div>
                <div className="col-lg-9 col-md-9">
                    <Router History={customHistory}>
                        <div>

                                <Route exact path="/" component={ProductListComponent}/>
                                <Route exact path="/settings" component={SettingsComponent}/>
                                <Route exact path="/add" component={AddProduct}/>
                                <Route exact path="/view/:id" component={ViewProduct}/>

                        </div>
                    </Router>
                </div>

            </div>;
    }
}

export default Main;

現在のコードでは、ProductListComponent にリダイレクトできます。

ログイン後

追加ボタンクリック後

しかし、AddProduct または ViewProduct または SettingsComponent コンポーネントに移動しようとすると、空白のページが表示されます。どうすれば修正できますか