react-router - 如何不在 React Router 6 中呈现父路由？

Question

<Route path="/exercises" element={List}>
    <Route path=":id" element={Exercise} />
</Route>

网址:

/练习

/练习/15

当用户访问/exercises 时，他们会看到一个练习标题列表。他们可以单击标题并进行练习。什么时候去例如/exercises/15 他们应该看到那个练习。

关键在于，当Exercise 组件渲染时，我们根本不想让List 组件渲染。它们是不同的东西。

文档中的示例似乎是关于这种情况的，例如您有一个消息列表，并且在呈现单个消息时仍然希望看到该列表。在这种情况下，您将使用 <Outlet> 呈现个人消息的组件。在消息中。用户会看到消息列表和单个消息。

但在我的例子中，我只想呈现单个“最终”组件。

所以我认为从 React Router 的角度来看，这根本不是嵌套路由？在此基础上，我尝试过:

<Route path="exercises" element={List} />
<Route path="exercises/:id" element={Exercise} />  

这实际上有效。这是正确的做法吗？

Answer 1

是的，您可以创建 List 组件作为布局组件，呈现一些 UI 和 Outlet 到呈现嵌套的 Route 组件。

<Route path="/exercises" element={<List />}>
  <Route path=":id" element={<Exercise />} />
</Route>

这将始终在匹配时呈现布局 List 组件。

如果你想单独渲染组件，那么你可以使用两个独立的、不相关的路由。

<Route path="/exercises" element={<List />} />
<Route path="/exercises/:id" element={<Exercise />} />

或者将两者渲染到布局组件中。当路径与布局路径完全匹配时，使用 index 路由来匹配和呈现路由。

const ExerciseLayout = () => {
  // any common business logic/state/etc...

  return (
    <div /* any common layout styling, etc.... */ >
      <Outlet />
    </div>
  );
};

<Route path="/exercises" element={<ExerciseLayout />}>
  <Route index element={<List />} />
  <Route path=":id" element={<Exercise />} />
</Route>

如果 List 和 Exercise 路由总是一起呈现并且您想自动移动它们，这将很有用周围，​​或者如果你有一些共同的逻辑或样式，你想在 "/exercise" 路由之间共享。或者您可以简单地为它们呈现 Outlet 作为最低限度。

<Route path="/exercises" element={<Outlet />}>
  <Route index element={<List />} />
  <Route path=":id" element={<Exercise />} />
</Route>