javascript - React Router v6 中嵌套在路由内部时组件丢失

Question

当使用 React Router v6 将 ChoosePlayer 组件嵌套在 Route 中时，

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

    <Route path="/players">
      <Route element={<ChoosePlayer />} />
      // <--- Some dynamically generated routes here for /players/{playerName}
      // These inner routes shows a modal in addition to ChoosePlayer in the background
    </Route>

  </Routes> 
</BrowserRouter>

当我们位于 URL http://localhost:3000/players 或 http://localhost:3000/时，ChoosePlayer 组件不会呈现玩家/到达者。

作为健全性检查，当我们有

时，ChoosePlayer 组件将在 http://localhost:3000/chooseplayer 处呈现

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/chooseplayer" element={<ChoosePlayer />} />
  </Routes> 
</BrowserRouter>

以及在 http://localhost:3000/players 处，当 index 添加到其 Route 组件时，但这会阻止 ChoosePlayer 显示在 http://localhost:3000/players/reacher

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

    <Route path="/players">
      <Route index element={<ChoosePlayer />} />
      // <--- Some dynamically generated routes here for /players/{playerName}
      // These inner routes shows a modal in addition to ChoosePlayer in the background
    </Route>

  </Routes> 
</BrowserRouter>

为什么第一个示例中没有渲染？有没有办法在 React Router v6 中做到这一点？我认为这种方法在 React Router v5 中有效。

谢谢!

Answer 1

所以我收集到您想要渲染这个 ChoosePlayer 组件，路径为 "/players" 并且 在某些 “/players/*” 路径上时。在这种情况下，您将 ChoosePlayer 更多地视为呈现一组嵌套路由的布局组件。

问题

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/players">
      <Route element={<ChoosePlayer />} />
      // <--- Some dynamically generated routes here for /players/{playerName}
      // These inner routes shows a modal in addition to ChoosePlayer in the background
    </Route>
  </Routes> 
</BrowserRouter>

ChoosePlayer 路由缺少匹配和渲染的路径。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/chooseplayer" element={<ChoosePlayer />} />
  </Routes> 
</BrowserRouter>

ChoosePlayer 已匹配并呈现，但不在 "/players/*" 路由上，并且没有任何嵌套子路由。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/players">
      <Route index element={<ChoosePlayer />} />
      // <--- Some dynamically generated routes here for /players/{playerName}
      // These inner routes shows a modal in addition to ChoosePlayer in the background
    </Route>
  </Routes> 
</BrowserRouter>

索引路由，ChoosePlayer 在路径完全 "/players" 时匹配并渲染，但被排除在渲染之外当匹配和渲染其他嵌套路由之一时。

解决方案

我建议将 ChoosePlayer 向上移动到根 "/players" 路由中，并渲染一个 Outlet 组件，以便将嵌套路由渲染到.

示例:

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

const ChoosePlayer = () => {
  //  ...any component business logic...

  return (
    <div /* any container props/styling/etc... */>
      {/* Common Choose Players UI */}
      <Outlet /> // <-- nested routes render into here
    </div>
  );
};

...

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/players" element={<ChoosePlayer />} >
      // <--- Some dynamically generated routes here for /players/{playerName}
      // These inner routes shows a modal in addition to ChoosePlayer in the background
    </Route>
  </Routes> 
</BrowserRouter>

您可以阅读有关布局路线的更多信息 here .