Al anidar el componente ChoosePlayer dentro de una Route usando React Router v6,
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/players"> <Route element={<ChoosePlayer />} /> // <--- Some dynamically generated routes here for /players/{playerName} // These inner routes shows a modal in addition to ChoosePlayer in the background </Route> </Routes> </BrowserRouter> el componente ChoosePlayer no se procesa cuando estamos en la URL http://localhost:3000/players o http://localhost:3000/players/reacher .
Como control de cordura, el componente ChoosePlayer se representa en http://localhost:3000/chooseplayer cuando tenemos
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/chooseplayer" element={<ChoosePlayer />} /> </Routes> </BrowserRouter> y en http://localhost:3000/players cuando se agrega el index a su componente de Route , pero esto evita que ChoosePlayer aparezca en http://localhost:3000/players/reacher
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/players"> <Route index element={<ChoosePlayer />} /> // <--- Some dynamically generated routes here for /players/{playerName} // These inner routes shows a modal in addition to ChoosePlayer in the background </Route> </Routes> </BrowserRouter>¿Por qué no se representa en el primer ejemplo? ¿Hay alguna manera de hacer esto en React Router v6? Creo que este enfoque funciona en React Router v5.
¡Gracias!
Así que me di cuenta de que desea renderizar este componente ChoosePlayer con la ruta "/players" y también cuando está en alguna ruta "/players/*" . En este caso, está tratando a ChoosePlayer más como un componente de diseño que representa un conjunto de rutas anidadas.
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/players"> <Route element={<ChoosePlayer />} /> // <--- Some dynamically generated routes here for /players/{playerName} // These inner routes shows a modal in addition to ChoosePlayer in the background </Route> </Routes> </BrowserRouter>
A la ruta ChoosePlayer le falta una ruta para hacer coincidir y renderizar.
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/chooseplayer" element={<ChoosePlayer />} /> </Routes> </BrowserRouter>
ChoosePlayer coincide y se procesa, pero no está en una ruta "/players/*" y no tiene rutas secundarias anidadas.
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/players"> <Route index element={<ChoosePlayer />} /> // <--- Some dynamically generated routes here for /players/{playerName} // These inner routes shows a modal in addition to ChoosePlayer in the background </Route> </Routes> </BrowserRouter>
Como una ruta de índice, ChoosePlayer se compara y representa cuando la ruta es exactamente "/players" , pero se excluye de la representación cuando se compara y representa una de las otras rutas anidadas.
Sugiero mover ChoosePlayer a la ruta raíz "/players" y renderizar un componente Outlet para que se rendericen las rutas anidadas.
Ejemplo:
import { Outlet } from 'react-router-dom'; const ChoosePlayer = () => { // ...any component business logic... return ( <div /* any container props/styling/etc... */> {/* Common Choose Players UI */} <Outlet /> // <-- nested routes render into here </div> ); };...
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/players" element={<ChoosePlayer />} > // <--- Some dynamically generated routes here for /players/{playerName} // These inner routes shows a modal in addition to ChoosePlayer in the background </Route> </Routes> </BrowserRouter>Puede leer más sobre las rutas de diseño aquí .