【问题标题】：Navigate between main content components using react-router-dom within nested components在嵌套组件中使用 react-router-dom 在主要内容组件之间导航
【发布时间】：2020-10-14 07:34:20
【问题描述】：

在这种情况下，有一个App 组件，它有一个Header 组件，如果用户登录则呈现一个标题，否则呈现一个。还有一个Access 组件，如果用户未登录，则呈现Landing 组件；如果用户已登录，则呈现Dashboard。如果登录，用户可以访问所有路由。如何使用react-router-dom 如果用户在 Dashboard 组件上？目前，LeftNav 应始终在视图中，而 main-content className 中的组件基于路由切换。目前只有LeftNav 和MainContent 组件在"/" 上工作，如果导航到/test 或/test/new neither the LeftNavorTestComponentrender, however theHeadercomponent is still rendering correctly. What am I doing wrong here or how is this toggling betweenmain-content` 组件实现了吗？

import { BrowserRouter, Route } from "react-router-dom";
import Header from "./Header";
import Access from "./Access";

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Header />
                        <Route exact path="/" component={Access} />
                    </div>
                </BrowserRouter>
            </div>
        );
    }
};

export default App;

////////////////////////////////

import Landing from "./Landing";
import Dashboard from "./Dashboard";

class Access extends Component {
    renderContent() {
        switch (this.props.auth) {
            case null:
                return;
            case false:
                return (
                    <Landing />
                );
            default:
                return (
                    <Dashboard />
                );
        }
    }

    render() {
        return (
            <div>
                {this.renderContent()}
            </div>
        );
    }
}

export default Access;

////////////////////////////////

import { Switch, Route } from "react-router-dom";
import LeftNav from "./dashboard/LeftNav";
import MainContent from "./dashboard/MainContent";
import TestContent from "./dashboard/TestContent";
import TestContentNew from "./dashboard/TestContentNew";

class Dashboard extends Component {
    render() {
        return (
            <div>
                <div className="dashboard-wrapper" style={dashboardWrapper}>
                    <LeftNav />
                    <div className="main-content">
                        <Switch>
                            <Route path="/" component={MainContent} />
                            <Route path="/test" component={TestContent} />
                            <Route path="/test/new" component={TestContentNew} />
                        </Switch>
                    </div>
                </div>
            </div>
        );
    }
};

export default Dashboard;

【问题讨论】：

标签： javascript reactjs react-router jsx react-router-dom

【解决方案1】：

问题

您的应用程序中的主要Route只有在它完全匹配“/”时匹配并呈现一个路由，所以当你导航到它不再匹配的另一条路径。

解决方案

我没有看到 在哪里您将 auth 作为道具传递给 Access，但由于它处理身份验证和呈现您的实际路线可以简单地渲染 it 而不是 App 中的 Route。它将始终由路由器呈现并显示登录页面或仪表板。

import { BrowserRouter, Route } from "react-router-dom";
import Header from "./Header";
import Access from "./Access";

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Header />
                        <Access />
                    </div>
                </BrowserRouter>
            </div>
        );
    }
};

【讨论】：