React Router - 嵌套路由

[jtwang7]

React Router - 嵌套路由

参考文章： 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;

⚠️注意事项

1. 在一级导航栏匹配二级导航路由的时候，不要加exact 属性，否则二级导航中的子组件将会无法匹配到。
2. path 填写绝对路径，路由匹配时会被添加到域名根目录后进行匹配。

Route 的 exact 属性可以实现路由的精确匹配。 精确匹配：跳转目标与 location.path 完全一致时，才触发路由跳转 模糊匹配：跳转目标的所有父级路径 location.path 都会被匹配。例如跳转目标为 /aaa/bbb 时，它的父级路径 /aaa 以及 /aaa/bbb 都会被匹配到

Route <Switch> 标签 被 react-router 的 Switch 标签包裹的路由 <Route>，会在第一次路由匹配成功后停止匹配。 假设要跳转目标为 /aaa/bbb，定义的路由有 /aaa 和 /aaa/bbb 且均未设置 exact 属性，那么跳转目标会在 /aaa 匹配成功后就直接跳转并停止匹配

总结

大多数情况下，为路由设置 exact 精确匹配，当存在嵌套路由时，将 exact 精确匹配定义在子级路由，⚠️父级路由不能定义 exact。当父级路由定义 exact 时，访问甚至不能到达子级路由。