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

Question

以下React路由代码可能在React Router v5中工作，但在React Router v6中给出以下错误

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

是否可以更新路由/路由代码，以便它在 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>
  )

}

Answer 1

该Player组件应该由propRoute上的组件渲染element，而不是作为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>