ReactJS路由无法正常工作

我有一个简单的reactjs项目。具有仪表板登录功能。

我有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定义了路由器。

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.'
                });
            });

        }
    }
}.

主要用于,成功登录后用户将进入主要组件。这里我定义了另一个路由器 产品列表组件,设置组件,添加产品,查看产品

主.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或setings组件组件时,它显示的是空白页。我怎么能修好它