在 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/players/reacher时， 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>

您可以在此处阅读有关布局路线的更多信息。