使用确切路径反应路由器嵌套路由答案

【问题标题】：React router nested routes with exact path使用确切路径反应路由器嵌套路由
【发布时间】：2020-08-22 12:35:57
【问题描述】：

请帮忙。我正在尝试创建嵌套路由，但这里有个问题：如果我使用 exact path，我就不能有嵌套路由。

例如，我想要一个嵌套的路由和一个单独的路由。如果我想要一个单独的，我必须使用exact。我怎样才能两者兼得？

  <Route exact path="/projects" component={Projects} />

  <Route path="/projects/individual" component={ProjectsList} />
  <Route path="/projects/nested" component={ProjectsList} />

这里是codesandbox。

【问题讨论】：

标签： javascript reactjs react-router react-component

【解决方案1】：

你是对的，一个确切的属性你失去了使用嵌套路由的灵活性。这里的解决方案是利用Switch 并为您的路由排序，使前缀路径位于末尾

<Switch>
  <Route path="/projects" component={Projects} />
  <Route path="/" component={Home} />
</Switch>

在项目中你可以编写嵌套路径

<Route path="/projects/individual" component={ProjectsList} />
<Route path="/projects/nested" component={ProjectsList} />

更新：

但是，如果在 ProjectsList 组件（即路径 "/projects/individual" 和 "/projects/nested"）上，您不想渲染 Projects 组件，您可以像这样使用它们

<Switch>
  <Route path="/projects/individual" component={ProjectsList} />
  <Route path="/projects/nested" component={ProjectsList} />
  <Route path="/projects" component={Projects} />
  <Route path="/" component={Home} />
</Switch>

【讨论】：

您确定/projects/individual 路由会在没有Projects 组件的情况下显示吗？
什么意思它会在没有项目组件的情况下显示？
我用另一种方式更新了代码，让您可以渲染/projects/individual 并使用"/projects/nested" 和其他路径。