[Bug]: Nested routes not working fine

[mbilesanmi]

What version of React Router are you using?

v6.4.1

Steps to Reproduce

Create a BrowserRouter similar to the following

Try to navigate from root to blog and that works fine. Navigating from blog to blogPost updates the url, but still renders DeferredBlogPostsPage component.

Expected Behavior

Nesting should work fine regardless of how deep it is when loaders or any other props are used.

Actual Behavior

Code sandbox deploy
Code sandbox

Navigating to the Blog page works fine. However, clicking into a blog-post doesn't work. It updates the url, but doesn't render expected component.

[yunior0814]

@mbilesanmi I recommend to do something like this

<Route
      id="blog"
      path="blog"
      element={<Outlet  />}
    >
      {/* <Route index /> */}
       <Route
          index
          loader={deferredBlogPostsLoader}
          element={<DeferredBlogPostsPage />}
      />
      <Route
        id="blogPost"
        path=":id"
        element={<PostDetailPage />}
        loader={blogPostLoader}
      />
    </Route>

[mbilesanmi]

This was the approach I ended up going with, though it meant I needed to have a separate loader on the parent Route. I was trying to solve for using the nested routes and handlers to build breadCrumbs, and the nesting could go deeper. I had to create a Layout that then contained the Outlet for this purpose.

[mbilesanmi]

Thanks @yunior0814 for taking the time to have a look.