使用 React Router 5 时遇到问题

Question

我无法理解如何正确使用 React Router。 我想要一个在根目录 ( "/" ) 呈现的组件有多个路由并默认重定向到"/projects" 。 我想要的路线是这些：

1. "/projects"
2. "/projects/project/:projectId/"
3. "/projects/project/:projectId/device/:deviceId/"
4. "/projects/project/:projectId/device/:deviceId/task/:taskId/"

无论如何，无论我尝试什么，尽管链接 href 与路由路径匹配，但我无法渲染第二条路由之后的任何内容。

从某种意义上说，我真的不想有嵌套的路由（至少不是在这里实现的方式，只是根据路径替换组件而不是附加。

这是许多尝试之一的CodeSandbox链接。

这是我的路线：

<Switch>
  <Redirect exact from="/" to="/projects/" />

  <Route path="/projects/" exact>
    <p>List of projects.</p>

    <Link to="/projects/project/1/">Project #1</Link>
  </Route>

  <Route path="/projects/project/:projectId/">
    <p>List of devices</p>

    <Link to="/projects/project/1/device/1/">Device #1</Link>
  </Route>

  <Route path="/projects/project/:projectId/device/:deviceId/">
    <p>List of tasks</p>

    <Link to="/projects/project/1/device/1/task/1/">Task #1</Link>
  </Route>

  <Route path="/projects/project/:projectId/device/:deviceId/task/:taskId/">
    <p>Task info.</p>
  </Route>
</Switch>

Answer 1

这可以通过将exact添加到其他路由来解决。

更新的工作Codesandbox

这样做的原因是/projects/project/:projectId/是第一个匹配的路由，即使对于任务列表也是如此，因为通配符:projectId 。

  <Route exact path="/projects/project/:projectId/">
    <p> List of devices </p>

    <Link to="/projects/project/1/device/1/"> Device #1 </Link>
  </Route>

  <Route exact  path="/projects/project/:projectId/device/:deviceId/">
    <p> List of tasks </p>

    <Link to="/projects/project/1/device/1/task/1/"> Task #1 </Link>
  </Route>

  <Route exact  path="/projects/project/:projectId/device/:deviceId/task/:taskId/">
    <p> Task info. </p>
  </Route>

Answer 2

问题是在Switch组件中，路径顺序和特异性很重要！ 请记住， Switch “呈现与位置匹配的第一个子<Route>或<Redirect> ”。

要解决此问题，您应该按照路径特异性的相反顺序重新排序路由。 换句话说，您应该尝试在不太具体的路径之前匹配更具体的路径。 正确完成后，就无需在整个代码中散布exact prop。

在大约 99.9% 的用例中不需要exact prop。

例子：

<Switch>
  <Route path="/projects/project/:projectId/device/:deviceId/task/:taskId">
    <p>Task info</p>
  </Route>

  <Route path="/projects/project/:projectId/device/:deviceId">
    <p>List of tasks</p>
    <Link to="/projects/project/1/device/1/task/1">Task #1</Link>
    ... other task links ...
  </Route>

  <Route path="/projects/project/:projectId">
    <p>List of devices</p>
    <Link to="/projects/project/1/device/1">Device #1</Link>
    ... other device links ...
  </Route>

  <Route path="/projects">
    <p>List of projects</p>
    <Link to="/projects/project/1">Project #1</Link>
    ... other project links ...
  </Route>

  {/* Anything not handled above redirects to "/projects" */}
  <Redirect to="/projects" />
</Switch>