侧边栏的 react-router-dom 配置答案

【问题标题】：react-router-dom config for sidebar侧边栏的 react-router-dom 配置
【发布时间】：2018-09-05 13:26:53
【问题描述】：

我正在基于react-boilerplate 创建应用程序，然后我为主页添加sigma 仪表板模板。假设我有 4 页：

登录
首页
用户
未找到页面

我的路线代码是这样的：

return (
    <div>
        <Switch>
            <Route exact path="/Login" component={LoginPage} />
            <Sigma>
                <Route exact path="/Home" component={HomePage} />
                <Route exact path="/User" component={UserPage} />
                <Route exact path="/EditUser" component={EditUserPage} />
            </Sigma>
            <Route component={NotFoundPage} />
        </Switch>
    </div>
);

对于登录、主页和用户，它已经按我的预期显示。登录页面将显示没有侧边栏，然后主页和用户将显示在侧边栏。但是对于未找到的页面，它没有按我的预期显示。我希望它在没有侧边栏的情况下显示。

登录页面：

主页：

用户：

未找到页面：

请提供一些与此问题相关的指针/文档。非常感谢之前。来源：https://github.com/cumibulat/PrimeJ2H/

【问题讨论】：

标签： reactjs react-redux react-router react-boilerplate

【解决方案1】：

在这种情况下，您需要更改您的 index.js 以在加载路由并在 Base Component 中输入您的路由组件后呈现一个“基础组件”。

在这个 Base 组件中，您可以使侧边栏在您的应用程序中使用。

例如：

<Switch>
<Route path="/" exact component={Login} />
<Route path="/register" component={Register} />
<Route path="/dashboard"><Base><Dashboard /></Base></Route>
<Route component={FourHundredFour} />
</Switch>

【讨论】：