El siguiente código de rutas de React probablemente funcione en React Router v5, pero da el siguiente error en React Router v6
Error: [Player] no es un componente
<Route>. Todos los componentes secundarios de<Routes>deben ser<Route>o<React.Fragment>
¿Es posible actualizar las rutas/código de ruta para que funcione en 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> ) }El componente Player debe ser representado por un componente Route en el accesorio del element , no como un elemento secundario de 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>Debe mapear rutas en su ruta principal. Me gusta:
<Route path="/players"> {players.map((player) => ( <Route exact key={player.name} path={`/players/${player.name}`}> <Player player={player} /> </Route> ); )} </Route>Pero si desea renderizar un reproductor dinámico, entonces no use el código anterior para ese propósito porque no es el mejor enfoque si está usando un nombre de jugador dinámico. En tu código estás creando cada ruta para cada jugador. Entonces, usa el siguiente código:
<Route path="/players"> <Route exact path={":playerName"} element={<Player/>} /> </Route>Y en el componente Player, extraiga playerName de parámetros como:
let { playerName } = useParams();