React Router 5路由配置问题：无法渲染深层路由

问题根源 #

React Router v5 的 <Switch> 组件是从上到下匹配第一个符合路径的路由就停止渲染。你的路由按路径从短到长排列，当访问 /projects/project/1/device/1 这类长路径时，会先被前面的 /projects/project/:projectId 路由匹配到（该路由没有 exact 属性，会匹配所有以它开头的路径），导致后面更具体的路由根本没机会被匹配。

两种解决方案 #

方案一：调整路由顺序，长路径放前面 #

把更具体、更长的路由放在 <Switch> 最前面，短路径后置，让 <Switch> 优先匹配最符合的路由：

<Switch>
  {/* 根路径重定向 */}
  <Redirect exact from="/" to="/projects" />

  {/* 最具体的任务路由 */}
  <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>
  </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" exact>
    <p>List of projects.</p>
    <Link to="/projects/project/1">Project #1</Link>
  </Route>
</Switch>

方案二：给非顶级路由添加 exact 属性 #

给除根重定向和项目列表外的所有路由加上 exact，确保只有路径完全匹配时才渲染对应组件：

<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" exact>
    <p>List of devices</p>
    <Link to="/projects/project/1/device/1">Device #1</Link>
  </Route>

  <Route path="/projects/project/:projectId/device/:deviceId" exact>
    <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" exact>
    <p>Task info.</p>
  </Route>
</Switch>

额外提示 #

建议统一去掉路径末尾的斜杠，React Router 会自动处理路径匹配，避免 /projects 和 /projects/ 这类细微差异导致的匹配问题。

内容的提问来源于stack exchange，提问作者Karolis