React Router v6给Route传路径数组报错问题求助

问题原因 #

React Router v6 重构了路由匹配逻辑，单个 <Route> 组件的 path 属性不再支持传入数组。旧版本（v5及更早）搭配 <Switch> 时允许这种写法，但v6移除了该特性，直接传数组会触发 meta.relativePath.startsWith is not a function 错误。

解决方案 #

方案1：拆分多个 Route 组件 #

为每个路径单独声明 Route，复用同一个组件元素：

<Route path="/search" element={<Results />} />
<Route path="/images" element={<Results />} />
<Route path="/news" element={<Results />} />
<Route path="/videos" element={<Results />} />

方案2：使用 useRoutes 钩子 #

通过路由配置数组实现多路径对应同一组件，适合路径较多的场景：

import { useRoutes } from 'react-router-dom';

function AppRoutes() {
  const routes = useRoutes([
    {
      path: ['/search', '/images', '/news', '/videos'],
      element: <Results />
    }
    // 其他路由配置...
  ]);
  return routes;
}

// 在根组件中渲染
function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

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