Component Missing when Nested inside of Route in React Router v6

user_3023615 0
Viewed 409

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!

react-router-dom react-router reactjs javascript
1 Answers

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.

Issue

<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.

Solution

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.

user_86908570
Related