为 3 条路线渲染相同的组件

Question

我希望我的 React 路由器仅在 URL 与这 3 个路径中的任何一个完全匹配时才对 return 组件进行响应，而 return 则在不匹配时出现错误。我怎样才能缩短它？

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Table entries={posts} />} />
        <Route path="/evens" element={<Table entries={posts} />} />
        <Route path="/odds" element={<Table entries={posts} />} />
        <Route ??? element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );

Answer 1

RRDv6 路由仅采用字符串 path 属性。如果您需要在多个路径上渲染相同的组件，您需要为每个路径渲染一个 Route。

为了使代码更DRY，您可以尝试从路径数组映射路由。

示例：

return (
  <BrowserRouter>
    <Routes>
      {["/", "/evens", "/odds"].map(path => (
        <Route
          key={path}
          path={path}
          element={<Table entries={posts} />}
        />
      )}
      <Route path="*" element={<ErrorPage />} />
    </Routes>
  </BrowserRouter>
);

现在这是否更具可读性或可维护性可能取决于 debate/opinion。不过，重复性较低。

为 3 条路线渲染相同的组件

Render same component for 3 routes

react-router

react-router-dom

为 3 条路线渲​​染相同的组件

Render same component for 3 routes

react-router

react-router-dom

为 3 条路线渲染相同的组件