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

【问题标题】：React Router v6 error: All component children of <Routes> must be a <Route> or <React.Fragment>React Router v6 错误：<Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-10-15 13:25:05
【问题描述】：

以下 React 路由代码可能适用于 React Router v5，但在 React Router v6 中会出现以下错误

错误：[播放器] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

是否可以更新 Routes/Route 代码以使其在 React Router v6 中工作？

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

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

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

        </BrowserRouter>
    </ThemeProvider>
  )

}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案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>

【讨论】：

【解决方案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();

【讨论】：