Open jtwang7 opened 3 years ago
参考文章: React Router的嵌套路由以及遇到的问题
由于项目的模块化特性,前端路由嵌套出现的更加的频繁,路由嵌套可以更好地帮助页面实现总体划分。但路由嵌套需要注意一些问题,否则可能导致路由无法正确匹配和跳转。
// A.js function A() { return ( <Router> <Route path="/" exact component={cmp1}/> // 一级路由:(嵌套路由) 不能加 exact <Route path="/aaa/" component={B}/> </Router> ); } export default A;
// B.js function B() { return ( <div> <Switch> // path 匹配的是从域名后根目录开始的绝对路径,因此不能省略一级路由 <Route path="/aaa/one" exact component={Reactpage}/> <Route path="/aaa/two" exact component={Vue}/> <Route path="/aaa/three" exact component={Flutter}/> </Switch> </div> ) } export default B;
⚠️注意事项
Route 的 exact 属性可以实现路由的精确匹配。 精确匹配:跳转目标与 location.path 完全一致时,才触发路由跳转 模糊匹配:跳转目标的所有父级路径 location.path 都会被匹配。例如跳转目标为 /aaa/bbb 时,它的父级路径 /aaa 以及 /aaa/bbb 都会被匹配到 Route <Switch> 标签 被 react-router 的 Switch 标签包裹的路由 <Route>,会在第一次路由匹配成功后停止匹配。 假设要跳转目标为 /aaa/bbb,定义的路由有 /aaa 和 /aaa/bbb 且均未设置 exact 属性,那么跳转目标会在 /aaa 匹配成功后就直接跳转并停止匹配
Route 的 exact 属性可以实现路由的精确匹配。 精确匹配:跳转目标与 location.path 完全一致时,才触发路由跳转 模糊匹配:跳转目标的所有父级路径 location.path 都会被匹配。例如跳转目标为 /aaa/bbb 时,它的父级路径 /aaa 以及 /aaa/bbb 都会被匹配到
location.path
/aaa/bbb
/aaa
Route <Switch> 标签 被 react-router 的 Switch 标签包裹的路由 <Route>,会在第一次路由匹配成功后停止匹配。 假设要跳转目标为 /aaa/bbb,定义的路由有 /aaa 和 /aaa/bbb 且均未设置 exact 属性,那么跳转目标会在 /aaa 匹配成功后就直接跳转并停止匹配
<Switch>
<Route>
大多数情况下,为路由设置 exact 精确匹配,当存在嵌套路由时,将 exact 精确匹配定义在子级路由,⚠️父级路由不能定义 exact。当父级路由定义 exact 时,访问甚至不能到达子级路由。
React Router - 嵌套路由
参考文章: React Router的嵌套路由以及遇到的问题
前言
由于项目的模块化特性,前端路由嵌套出现的更加的频繁,路由嵌套可以更好地帮助页面实现总体划分。但路由嵌套需要注意一些问题,否则可能导致路由无法正确匹配和跳转。
示例
⚠️注意事项
总结
大多数情况下,为路由设置 exact 精确匹配,当存在嵌套路由时,将 exact 精确匹配定义在子级路由,⚠️父级路由不能定义 exact。当父级路由定义 exact 时,访问甚至不能到达子级路由。