React Router Dom V6 Nested Route Attributes

Question

On the React Router Dom v5 I had a working code where I could use the nested elements. V5 Code was:

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" />
        {user && (
          <>
            <Route path="/movies">
              <Home type="movie" />
            </Route>
            <Route path="/series">
              <Home type="series" />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

... Now when I am trying to move to V6 version I cant access the content of nested page. These two nested routes showing the content based on "type" attribute, but in v6 I dont get any content at all. What I see, is only the home page. When I am trying to navigate through the navbar, only link is changing, but I cant access the content of the type element.

My current v6 code:

App.jsx:

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} >
          <Route path="/movies" element={<Home type='movies'/>} />
          <Route path="/series" element={<Home type='series'/>} />
        </Route>
      </Routes>
    </Router>
  );
};

Home.jsx:

const Home = ({type}) => {
      return (
        <div className='home'>
            <Navbar />
            <Featured type={type} />
            <List />
            <List />
            <List />
            <List />
            <Outlet />
        </div>
      )
    }

Can someone, please help me to understand what I am doing wrong and why react router does not load the content of the component?

Answer 1

From what I can tell the RRDv6 code isn't an accurate conversion. The v6 version is recursively rendering the Home component. The nested routes shouldn't also be using absolute paths.

Suggestions

1. Remove the Home component and Outlet from Home and just render the two nested routes. If the intent is to render a Home component without any type then use an index route.

   const Home = ({ type }) => {
     return (
       <div className='home'>
         <Navbar />
         <Featured type={type} />
         <List />
         <List />
         <List />
         <List />
       </div>
     );
   };
   

   ...

   <Route path="/">
     <Route index element={<Home />} />
     <Route path="movies" element={<Home type='movies' />} />
     <Route path="series" element={<Home type='series' />} />
   </Route>
   

2. Flatten all the routes and remove the Outlet from Home, which is basically the same as above but now uses absolute paths.

   const Home = ({ type }) => {
     return (
       <div className='home'>
         <Navbar />
         <Featured type={type} />
         <List />
         <List />
         <List />
         <List />
       </div>
     );
   };
   

   ...

   <Route path="/" element={<Home />} />
   <Route path="/movies" element={<Home type='movies' />} />
   <Route path="/series" element={<Home type='series' />} />
   

3. Define a single route and use the path to your advantage. In other words, declare a path where the type is a route path param, and check the type from the params in the Home component.

   const Home = () => {
     const { type } = useParams();
     return (
       <div className='home'>
         <Navbar />
         <Featured type={type} />
         <List />
         <List />
         <List />
         <List />
       </div>
     );
   };
   

   ...

   <Route path="/" element={<Home />} />
   <Route path="/:type" element={<Home />} />
   

Answer 2

i recommend not nesting routes inside of the index route ( when path = "/" ). if you're going to nest a route is should be for a path like /profile/settings with /settings nested inside of /profile.

this is what i change the code to:

const App = () => {
  return (
    <Router>
      <Routes>
        <Route index element={<Home />} />
        <Route path="/movies" element={<Home type='movies'/>} />
        <Route path="/series" element={<Home type='series'/>} />
      </Routes>
    </Router>
  );
};

More on Nested Routes