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

在这种情况下，有一个

App

组件，它有一个

Header

组件，如果用户登录，则呈现一个Header，如果用户未登录，则呈现一个Header。还有一个

Access

组件，如果用户未登录，则呈现

Landing

组件；如果用户登录，则呈现

仪表板

。如果登录，用户可以访问所有路由。如果用户在

仪表板上，如何使用
react router dom
呈现组件？当前，
LeftNav
应始终处于视图中，而
主要内容中的组件将根据路线切换。当前，如果导航到
/test
或
/test/new，则只有
LeftNav
和
MainContent
组件可以在
“/”
上工作，而
LeftNav
或
TestComponent
组件都不能正确渲染。我在这里做错了什么，或者如何在
main 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;

从“react router dom”导入{BrowserRouter，Route}；
从“/Header”导入标题；
从“/Access”导入访问权限；
类应用程序扩展组件{
render（）{
返回(
);
}
};
导出默认应用程序；
////////////////////////////////
从“/Landing”导入着陆；
从“/Dashboard”导入仪表板；
类访问扩展组件{
renderContent（）{
开关（this.props.auth）{
大小写为空：
返回；
案例错误：
返回(
);
违约：
返回(
);
}
}
render（）{
返回(
{this.renderContent（）}
);
}
}
导出默认访问；
////////////////////////////////
从“react router dom”导入{Switch，Route}；
从“/dashboard/LeftNav”导入LeftNav；
从“/dashboard/MainContent”导入MainContent；
从“/dashboard/TestContent”导入TestContent；
从“/dashboard/TestContentNew”导入TestContentNew；
类仪表板扩展组件{
render（）{
返回(
);
}
};
导出默认仪表板；
问题
应用程序中的主
路径
仅在与“/”完全匹配时匹配并呈现路径，因此当您导航到另一个路径时，它将停止匹配

解决方案
我看不出你在哪里传递
auth
作为
Access
的道具，但是由于它处理身份验证并且呈现你的实际路线，你只需在
App
中呈现它而不是
路线。它将始终由路由器呈现，并显示登录页或仪表板

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

从“react router dom”导入{BrowserRouter，Route}；
从“/Header”导入标题；
从“/Access”导入访问权限；
类应用程序扩展组件{
render（）{
返回(
);
}
};