javascript - 使用 React Router 5 时遇到问题

Question

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

1. “/项目”
2. “/projects/project/:projectId/”
3. “/projects/project/:projectId/device/:deviceId/”
4. “/projects/project/:projectId/device/:deviceId/task/:taskId/”

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

从某种意义上说，我真的不想有嵌套路由(至少不是以它们的实现方式 here ，只需根据路径替换组件而不是附加。

这里是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>