在嵌套组件中使用 react-router-dom 在主要内容组件之间导航

Question

在这种情况下，有一个App组件有一个Header组件，如果用户登录，则呈现一个 header ，否则呈现一个。 还有一个Access组件，如果用户未登录，则呈现Landing组件；如果用户已登录，则呈现Dashboard 。如果登录，用户可以访问所有路由。我如何使用react-router-dom呈现组件用户在Dashboard组件上？ 目前， LeftNav应该始终在视图中，而main-content className中的组件根据路由切换。 目前只有LeftNav和MainContent组件在"/"上工作，如果导航到/test或/test/new neither the LeftNav or TestComponent 都不会render, however the Header component is still rendering correctly. What am I doing wrong here or how is this toggling between component is still rendering correctly. What am I doing wrong here or how is this toggling between的切换？

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;

Answer 1

问题

应用程序中的主Route只有在完全匹配“/”时才会匹配并呈现路由，因此当您导航到另一条路径时，它会停止匹配。

解决方案

我看不到您将auth作为道具传递给Access的位置，但由于它处理身份验证并呈现您的实际路线，您可以简单地呈现它而不是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>
        );
    }
};