在 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>

您可以在此處閱讀有關布局路線的更多信息。