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

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个有效的网址（登录，注册，忘记密码和/）。

您的路由中没有/add网址，因此没有组件可以呈现。

您可以从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组件。在切换中，您还可以删除path道具，因此所有其他路由都将重定向到Main组件。

reactjs路由无法正常工作

1 个答案: