Question

React Router v6 错误：<Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>

2022-03-03

6054

javascript reactjs react-router react-router-dom

以下REECT路由代码可能在React路由器V5中起作用，但是在React路由器V6

640261521

中给出以下错误它在React Router V6？

261037621 中起作用。

Answer 1

Player 组件应由 element 属性上的 Route 组件呈现，而不是作为 Route 的子组件呈现。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/players">
      {players.map((player) => (
        <Route
          key={player.name}
          path={`/players/${player.name}`}
          element={<Player player={player} />}
        />
      ))}
    </Route>
  </Routes> 
</BrowserRouter>

Answer 2

您应该将路由映射到其父路由中。例如：

   <Route path="/players">
     {players.map((player) => (
         <Route exact key={player.name} path={`/players/${player.name}`}>
            <Player player={player} />
         </Route>
       );
     )}
   </Route>

但是，如果您想渲染动态播放器，请不要将上述代码用于此目的，因为如果您使用动态 player.name，这不是最佳方法。在您的代码中，您将为每个播放器创建每条路由。因此，请使用以下代码：

<Route path="/players">
   <Route exact path={":playerName"} element={<Player/>} />
</Route>

在 Player 组件中，从参数中提取 playerName，例如：

let { playerName } = useParams();