Reactjs 如何创建react router v6的自定义子路由

MultipleRoute呈现的路由必须包装在Routes组件中，而MultipleRoute必须由Route组件本身呈现.只有Route个组件可以是Route个组件的有效子组件，因此MultipleRoute将需要获取您希望在每条路径上呈现的JSX.

示例:

<Route
  path="/*" // <-- Splat "*" is necessary for descendent routes to render
  element={(
    <MultipleRoute
      path={[
        "/a-route",
        "/another-route",
        "/another-more",
        "/even-other"
      ]}
      element={<VeryBigChildren />}
    />
  )}
/>

export const MultipleRoute = ({ path, element }) => (
  <Routes>
    {path.map((routePath) => (
      <Route key={routePath} path={routePath} element={element} />
    ))}
  </Routes>
);

虽然它is你的意见，只是渲染4路由直接是"讨厌的，难以阅读，难以维护"，相比上述代码，我不同意.这是大约两倍多的代码行来完成更少的.

这4条路由直接进行比较:

<Route path="/a-route" element={<VeryBigChildren/ >} />
<Route path="/another-route" element={<VeryBigChildren />} />
<Route path="/another-more" element={<VeryBigChildren />} />
<Route path="/even-other" element={<VeryBigChildren />} />

使用类似于上面的"多路由"组件的限制是，您只能 for each 要匹配的路径指定一个"/*"根级别的路由.如果您想要"分组"路由以呈现不同的组件，则需要将它们嵌套在其他根级路由下.

示例:

<Route
  path="/*"
  element={(
    <MultipleRoute
      path={[...]}
      element={<RootChildren />}
    />
  )}
/>
<Route
  path="/foo/*"
  element={(
    <MultipleRoute
      path={[...]}
      element={<FooChildren />}
    />
  )}
/>

对于这种复杂性，最好只实现普通的派生路由.

示例:

<Route path="/*" element={<RootChildren />} />
<Route path="/foo/*" element={<FooChildren />} />

const RootChildren = () => (
  <Routes>
    <Route path="/a-route" element={<VeryBigChildren/ >} />
    <Route path="/another-route" element={<VeryBigChildren />} />
    <Route path="/another-more" element={<VeryBigChildren />} />
    <Route path="/even-other" element={<VeryBigChildren />} />
  </Routes>
);

const FooChildren = () => (
  <Routes>
    ....
  </Routes>
);

MultipleRoute这个分量根本不是必需的.