React Router v6 的核心是基于 URL 路径的条件渲染。其 Routes 组件利用路径排序系统（Path Ranking System）为所有配置的路由路径计算得分，并选择得分最高的、最具体的路径进行匹配和渲染。这意味着当存在一个与当前 URL 精确匹配的路由时，通用或通配符路由（如 /*）将不会被渲染，从而确保了UI的精确控制。
核心概念：条件渲染与路径匹配
react router 的基本工作原理是通过匹配当前 url 路径来有条件地渲染特定的 ui 组件。与一些其他路由库可能采取的“渲染所有组件然后隐藏不匹配的”策略不同，react router 遵循的是一种“按需渲染”的模式——它只渲染与当前 url 匹配的那个组件。这使得应用的性能更优，因为不必要的组件不会被挂载和渲染。
React Router v6 的路径匹配系统
在 React Router v6 中，Routes 组件是路由匹配的核心。它取代了 v5 中的 Switch 组件，其行为类似于一个 switch 语句，根据当前 URL 路径选择一个最佳匹配项。
Routes 组件内部维护一个路径排序系统（Path Ranking System）。这个系统会为 Routes 组件内所有定义的路由路径计算一个“得分”或“排名”。通常，路径越具体，其排名就越高。例如：
/users/123 的排名会高于 /users/:id。/login 的排名会高于 /*。
当一个 URL 请求到来时，Routes 会遍历其子 Route，并选择排名最高且与当前 URL 匹配的那个路由进行渲染。这种排名机制主要用于解决多个路由可能同时匹配的情况，确保只有一个最佳匹配被选中并渲染。
路径匹配示例与解析
让我们通过一个具体的代码示例来深入理解 React Router v6 的路径匹配行为。
考虑以下路由配置：
<Suspense fallback={}> {/* 路由 A：通配符路径，匹配所有 */} <Route path='/*' element={} /> {/* 路由 B：精确路径，只匹配 /login */} <Route path='/login' element={} />
以及 Layout 组件的内部结构：
const Layout = () => { return ( 主页内容区域 <Route path='/demo1' element={} /> <Route path='/demo2' element={} /> );};
我们将分析两种不同的 URL 路径下的渲染行为：
场景一：URL 为 /login
当浏览器地址栏的 URL 为 http://yourdomain.com/login 时：顶层的 Routes 组件开始匹配。存在两个潜在的匹配项：路由 A (path=’/*’)：可以匹配 /login。路由 B (path=’/login’)：精确匹配 /login。根据路径排序系统，’/login’ 是一个精确匹配，其特异性（specificity）远高于通配符 /*。因此，’/login’ 路由的排名更高。Routes 组件会选择排名最高的路由 B 进行渲染。结果是：LoginPage 组件将被渲染。Layout 组件在这种情况下根本不会被渲染，甚至不会被挂载到 React 组件树中。这是因为 Routes 遵循“只渲染一个最佳匹配”的原则，一旦找到最佳匹配，其他路由（即使也能匹配但优先级较低）都会被忽略。
场景二：URL 为 /foo (或除 /login 以外的任何路径)
当浏览器地址栏的 URL 为 http://yourdomain.com/foo 时：顶层的 Routes 组件开始匹配。路由 B (path=’/login’)：不匹配 /foo。路由 A (path=’/*’)：可以匹配 /foo。此时，’/*’ 路由成为唯一匹配的选项，且它能匹配任何路径。因此，’/*’ 路由被选中，Layout 组件将被渲染。结果是：Layout 组件及其内部内容（包括其自身的 Routes）将被渲染。LoginPage 组件在这种情况下不会被渲染或挂载。
关于 Layout 内部的 Routes:需要注意的是，Layout 组件内部定义的 Routes 只有当 Layout 组件本身被顶层 Routes 匹配并渲染时，才会生效并进行内部的路径匹配。例如，如果 URL 是 http://yourdomain.com/demo1，顶层的 /* 会匹配并渲染 Layout。然后，Layout 内部的 Routes 会继续匹配 /demo1，并最终渲染 Demo1 组件。
注意事项
唯一匹配原则: Routes 组件的核心原则是每次只渲染一个最佳匹配的 Route。它不会同时渲染多个路由，即使多个路由的 path 都能匹配当前 URL。路径特异性是关键: 理解路径的特异性是正确配置和调试 React Router 的关键。精确路径（如 /users/123）总是优先于通用路径（如 /users/:id）或通配符路径（如 /*）。*通配符 `/的用途**:/*` 通常用作“捕获所有未匹配路径”的后备路由，或者作为布局组件的入口，以便在其内部处理更具体的子路由。但要注意其优先级在大多数情况下是最低的，除非没有其他更具体的路由可以匹配。嵌套路由: 当一个 Route 的 element 内部包含另一个 Routes 组件时，这形成了嵌套路由。内部的 Routes 只有在其父级 Route 被匹配并渲染后才会开始工作。内部路由的 path 通常是相对于父路由的，或者需要使用相对路径。
总结
React Router v6 的路径匹配机制基于 Routes 组件的条件渲染和路径排序系统。它通过选择最具体的匹配路径来确保精确的 UI 渲染。理解路径特异性以及 Routes 组件的“开关”行为，是有效构建和调试 React Router 应用的关键。在设计路由时，应优先考虑精确匹配，并将通配符或通用路径作为后备方案。
以上就是深入理解 React Router v6 路径匹配机制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513915.html
微信扫一扫 
支付宝扫一扫 
