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

and at 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" 和当在 some "/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。

在 React Router v6 中嵌套在路由内部时缺少组件

Component Missing when Nested inside of Route in React Router v6

javascript

reactjs

react-router

react-router-dom

问题

解决方案