React Router v7如何选择两条匹配度相同的路由？

1. 访问/foo/bar/baz时会渲染哪条路由？ #

会渲染第一条路由对应的<A />组件。

你提供的两条路由：

<Route path="/foo/:someVar/baz" element={<A />} />
<Route path="/foo/bar/:someOtherVar" element={<B />} />

它们的匹配等级（rank）完全相同——均包含2个静态URL分段、1个动态参数，rank总和一致。当多个路由匹配等级相同时，React Router会严格按照路由在<Routes>中的声明顺序匹配，优先选择先定义的路由，因此第一条路由会被选中渲染。

2. 如何解决匹配等级相同的平局？ #

可以通过以下方式处理：

• 调整路由声明顺序：将需要优先匹配的路由放在<Routes>中更靠前的位置，利用声明顺序的优先级规则让目标路由被选中。
• 提升路由特异性：修改路由路径，让目标路由的匹配等级更高。比如若想让<B />优先匹配，可以优化路径结构（如增加静态分段、减少动态参数），确保其rank高于另一条路由，从根源避免平局。
• 自定义匹配逻辑：使用useRoutes钩子替代<Routes>组件，编写自定义逻辑处理多路由匹配场景，根据业务需求手动选择要渲染的组件。

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