javascript - React Router v6 错误 : All component children of <Routes> must be a <Route> or <React. 片段>

Question

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

Error: [Player] is not a <Route> component. All component children of <Routes> must be a <Route> or <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>
  )

}

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>