反应js路由无法正常工作

Question

我有一个简单的 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.'
                });
            });

        }
    }
}.

Main 用于，用户登录成功后进入 Main 组件。在这里我定义了另一个路由器 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 组件时，它显示的是空白页。我该如何解决它

Answer 1

在您的主要路线（仪表板）中，您正在检查确切的路径，这意味着只有当完整路径匹配时，该路线才会呈现。因此，在您的主要路线中，您只有 4 个有效 url（登录、注册、忘记密码和 /）。

您的路由中没有 /add url，显示没有任何组件将呈现。

您可以从 / 路由中删除 exact 属性以实现。

                <div>
                    <Route exact path="/login" component={LoginComponent}/>
                    <Route exact path="/signup" component={RegisterComponent}/>
                    <Route exact path="/forget-password" component={ForgetPasswordComponent}/>
                    <Route path="/" component={Main}/>
                </div>

我已将Switch 用于react-router-dom，对此不确定，因为在此示例中我们没有Switch 组件。在 switch 中你也可以移除 path 的 props，所以所有其他路由都会重定向到 Main 组件。