React Router Dom V6 将数组传递给路径

Question

我想在react-router-dom v6中通过多个路由渲染同一页面，就像在v5中一样。但是，我找不到有效的方法来做到这一点。

v5 中的示例我可以这样做：

    <BrowserRouter>
      <Switch>
        <Route path={["/dashboard", "/home"]} render={<Home />} />
        <Route path="/other" render={<OtherPage/>} />
        <Route path={["/", "/404"]} render={<NotFound />} />
      </Switch>
    </BrowserRouter>

但在 v6 中，据说path需要是一个string。

我发现实现这一目标的唯一方法是将它们分开，如下所示：

    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Home />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>

这意味着我必须写<Home /> 多次。

我想保持我的代码尽可能干净。

我查了官方文档，但没有提到这部分。我做了研究，但找不到解决方案。

Answer 1

无需定制解决方案。最干净的解决方案是内部循环：

<Routes>
  {["/dashboard", "/home"].map(path => (
    <Route 
      key="Home" // optional: avoid full re-renders on route changes
      path={path}
      element={<Home />}
    />
  ))}
</Routes>

对于只有两条路线的用例，我个人认为拥有单独的路线更具可读性。但对于我的用例来说；当我有 6 个以上的路由指向同一个组件时，它不再有意义了。

关键道具

修复的key是一个“hack”，仅在用户可以在内部 URL 之间切换和/或组件很重的特定情况下才需要。对数组中的所有路由使用相同的内容key告诉 React，当 React Router 切换路由时，组件没有卸载，并且只有 props 发生了变化，这样 React 就不会重新渲染整个分支。它之所以有效，是因为 React Router v6 永远不会在任何时间点渲染两条路由。

操场

https://stackblitz.com/edit/github-otdpok?file=src/App.tsx

Answer 2

我创建了这个辅助函数，它在 React Router v6 中工作：

const renderMultiRoutes = ({ element: Element, paths, ...rest }: MultiRoutes) =>
  paths.map((path) => <Route key={path} path={path} {...rest} element={Element} />);

然后我可以执行以下操作：

<Routes>
  {renderMultiRoutes({
    paths: ['/', '/dashboard'],
    element: <Feature />,
  })}
</Routes>