When nesting the ChoosePlayer component inside a Route using 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>
the ChoosePlayer component does not render when we are on the url http://localhost:3000/players or http://localhost:3000/players/reacher.
As a sanity check, ChoosePlayer component is rendered at http://localhost:3000/chooseplayer when we have
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/chooseplayer" element={<ChoosePlayer />} />
</Routes>
</BrowserRouter>
and at http://localhost:3000/players when index is added to its Route component, but this prevents ChoosePlayer from showing up at 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>
Why is it not rendering in the first example? Is there a way to do this in React Router v6? I think this approach works in React Router v5.
Thanks!
So I've gathered you want to render this ChoosePlayer component with the path is "/players" and also when on some "/players/*" path. In this case you are treating ChoosePlayer more as a layout component that renders a set of nested routes.
<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>
The ChoosePlayer route is missing a path for matching and rendering.
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/chooseplayer" element={<ChoosePlayer />} /> </Routes> </BrowserRouter>
ChoosePlayer is matched and rendered, but isn't on a "/players/*" route and doesn't have any nested children routes.
<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>
An an index route, ChoosePlayer is matched and rendered when the path is exactly "/players", but is excluded from being rendered when matching and rendering one of the other nested routes.
I suggest moving ChoosePlayer up into the root "/players" route and render an Outlet component for the nested routes to be rendered into.
Example:
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>
You can read more about layout routes here.