使用 react-router-dom v4 / v5 组合侧边栏和嵌套路由答案

【问题标题】：Combination of Sidebar and Nested routes using react-router-dom v4 / v5使用 react-router-dom v4 / v5 组合侧边栏和嵌套路由
【发布时间】：2020-02-12 18:37:42
【问题描述】：

我想在单个路由文件中实现嵌套路由和侧边栏路由的某种组合。我希望组件像这样呈现。

"/" --- Registration page
"/login" ---- Login Page
"/application" --- Application Page
"/dashboard" --- Dashboard page with Sidebar and Application components
"/dashboard/application" --- Dashboard page with Sidebar and Application components
"/dashboard/user" --- Dashboard page with Sidebar and User components

我的路线设置是这样

      <Switch>
        <Route path="/" component={withAuth(Registration)} />
        <Route path="/login" component={withAuth(Login)} />
        <Route path={'/dashboard'} component={withAuth(Dashboard)}/>        
      </Switch>

在仪表板页面中，我基本上实现了来自 react-router-dom 网站的sidebar example。

它工作正常，但是我想将所有路由放在一个文件中。

类似的东西

<Switch>
  <Route path="/" component={withAuth(Registration)} />
  <Route path="/login" component={withAuth(Login)} />
  <Route path={'/dashboard'} component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
  <Route path="/dashboard/application" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
  <Route path="/dashboard/user" component={withAuth(Dashboard)} children={[Sidebar, User]}/>
</Switch>

上面的代码是虚构的代码，但它是为了让我了解我想要实现的目标。我尝试了类似 question 的解决方案，但它对我不起作用。

如何将所有路由放在一个文件中，并在 react-router-dom v4/v5 中处理侧边栏路由和嵌套路由？

我创建了一个example code sandbox，请尝试this 示例。

【问题讨论】：

你到底想要什么？你能分享屏幕截图以便更好地澄清吗？
@VahidAkhtar 我已经包含了示例代码。在代码中读取 cmets。 codesandbox.io/s/react-router-nesting-n7cdc
我在一个闭源产品中做过类似的事情。但是，我认为答案是您不能将所有路由放入 1 个文件中。我的路由分布在多个文件中，类似于您上面的文件，每个文件中都有一个开关。我构造它的方式是，每个路由的父组件都包含开关，并作为 Web 应用程序该部分的子菜单的路由器运行。

标签： reactjs routing react-router react-router-v4 react-router-dom

【解决方案1】：

虽然我认为将所有路由放在一个文件中已成为反模式，但我认为您可以实现与您正在寻找的足够接近的东西 - 具体而言，将所有路由放在同一个文件中。

主要技巧是像normal switch 一样使用开关。 Switch 中的最后一个案例成为默认案例（或路由）。

您还需要使用exact，因为没有它，它将每次都匹配URL /。 InternalRoutes 内的第二个 Switch 也是如此。如果您不包含exact，它将每次都匹配/dashboard，并且永远不会到达/dashboard/application 或dashboard/user。您仍然需要将 Routes 组件包装在 BrowserRouter 组件中。

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const Routes = props => {
  return (
    <Switch>
      <Route exact path="/" component={withAuth(Registration)} />
      <Route exact path="/login" component={withAuth(Login)} />
      <Route component={withAuth(InternalRoutes)} />
    </Switch>
  );
};

const InternalRoutes = props => {
  return (
    <Switch>
    <Route exact path="/dashboard" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
    <Route exact path="/dashboard/application" component={withAuth(Dashboard)} children={[Sidebar, Application]}/>
    <Route exact path="/dashboard/user" component={withAuth(Dashboard)} children={[Sidebar, User]}/>
    <Route component={NotFoundComponent} />
  );
};

const NotFoundComponent = props => {
  return <div>URL Not Found</div>;
};

export default Routes;

【讨论】：