React Router Dom V6如何给path传数组实现多路由渲染同一页面

react-router-dom v6 移除了path属性的数组类型支持，核心是为了优化路由匹配算法的效率和可预测性，你可以用以下两种方式实现和v5完全一致的效果，同时保持代码简洁：

方案1：数组遍历批量生成路由 #

这是和v5数组path逻辑最对齐的实现，只需要把需要命中同一个组件的路径整理为数组，通过map遍历批量生成<Route>即可，无需重复编写组件代码：

import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 批量匹配Home组件的路由 */}
        {["/dashboard", "/home"].map(path => (
          <Route 
            key={path} 
            path={path} 
            element={<Home />} 
          />
        ))}
        <Route path="/other" element={<OtherPage />} />
        {/* 批量匹配404组件的路由 */}
        {["/", "/404"].map(path => (
          <Route
            key={path}
            path={path}
            element={<NotFound />}
          />
        ))}
      </Routes>
    </BrowserRouter>
  )
}

如果项目中多路径同组件的场景较多，还可以封装为公共工具函数进一步简化代码：

// 公共工具函数，可单独抽离到公共文件
const renderMultiPathRoutes = (paths, element) => 
  paths.map(path => <Route key={path} path={path} element={element} />)

// 业务代码中使用
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {renderMultiPathRoutes(["/dashboard", "/home"], <Home />)}
        <Route path="/other" element={<OtherPage />} />
        {renderMultiPathRoutes(["/", "/404"], <NotFound />)}
      </Routes>
    </BrowserRouter>
  )
}

方案2：路径重定向（适合需要统一展示路径的场景） #

如果你希望多个路径指向同一个页面、且用户访问时路径会统一为其中一个（比如访问/dashboard自动跳转到/home，地址栏显示/home），可以用重定向实现，也不需要重复编写组件：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/dashboard" element={<Navigate to="/home" replace />} />
        <Route path="/other" element={<OtherPage />} />
        <Route path="/404" element={<NotFound />} />
        <Route path="/" element={<Navigate to="/404" replace />} />
      </Routes>
    </BrowserRouter>
  )
}

其中replace属性可以避免用户点击返回按钮时回到重定向之前的路径，可根据业务需求选择是否添加。

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