React Router嵌套子路由

关注

原创最新推荐文章于 2025-07-16 11:20:06 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

目标场景

<Router>
    <Switch>
      {/* 工具页的路由到toolPages组件中配置 */}
      <Route path="/toolPages" component={ToolPages}>
        <Route path="screenShot" component={<ScreenShot />}></Route>
      </Route>
    </Switch>
  </Router>

希望访问/toolpages/screebShot可以定位到【ScreenShot】组件，但是按照我预想的方法不能实现。

寻求理论

Router, Route，Link

当 history 改变时，会匹配出 Route 的一个分支，并且渲染这个分支中配置的组件，渲染时保持父 route组件嵌套子 route 组件。
Route放视图页面
Link 相当于是React中的a标签

路由匹配规则

优先级：自顶向下匹配路由

<Route path="/" >
// path遵循路由匹配规则：
//1. :parentName ——匹配一段位于/、？或#之后的URL，命中的部分接收到一个参数{name: ***}
<Route path="/hello/:name" /> //匹配/hello/child
 //2. () ——内部内容认为是可选
<Route path="/hello(/:name)" /> //匹配/hello/child, /hello
 //3. *匹配任意字符（非贪婪的）直到命中下一个字读，或者整个URL的末尾
<Route path="files/*.*" /> //匹配/files/hello.jpg
//如果路由使用了相对路径，那么完整的路径=它所有的祖先节点的路径拼上自身指定的相对路径，使用绝对路径可以忽略嵌套关系

嵌套子路由

先匹配到父组件，父组件要设置支持children传入渲染，但是在v5+版本上这样做不能匹配到第三级子路由。

最终做法

在父组件中做二次路由分配

<Route path="/toolPages" component={ToolPages} />
// ToolPages组件
<Switch>
   <Route path="/toolPages/screenShotPage" component={ScreenShotPage} />
</Switch>