React路由器嵌套的具有正确路径的路由

Question

请帮助。我正在尝试创建嵌套的路由，但这是一个问题：如果使用exact path，则不能有嵌套的路由。

例如，我想拥有一条嵌套的路线和一条单独的路线。如果我想拥有一个个人，则必须使用exact。我怎么都可以？

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

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

这里是codesandbox。

Answer 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>