React Router 新版本如何配置多路径映射到同一个element

适用于 v6.4.0 及以上版本 #

最新版 React Router 已经重新支持 path 属性传入路径数组，你之前的写法完全可以直接复用：

<Route path={['/example1', '/example2', '/exampleN']} element={<Test />} />

这种写法和旧版本的使用逻辑完全一致，不需要额外修改代码。 #

适用于 v6.0.0 ~ v6.3.x 版本 #

这个区间的 v6 版本暂时不支持数组类型的 path 属性，可以手动遍历路径数组生成多个 Route 组件实现相同效果：

{['/example1', '/example2', '/exampleN'].map(path => (
  <Route key={path} path={path} element={<Test />} />
))}

只要给每个生成的 Route 加唯一的 key 属性即可正常运行，和数组路径的效果完全相同。

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