反应路由器嵌套路线与确切的路径

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>

反应路由器嵌套路线与确切的路径

React router nested routes with exact path

javascript

reactjs

react-router

react-component