Skip to content

Root route component is rendered for non-matching-route path but not for missing resource #2255

Closed

Description

@lo1tuma

Which project does this relate to?

Router

Describe the bug

The component defined in the rootRoute is rendered when a non-matching path riggers the rendering of the notFoundComponent but it is not rendered when a child route trows a notFound() value in its loader.

Your Example Website or App

https://stackblitz.com/edit/github-yk78pg-lfpyxu?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

  • define a root route with component and notFoundComponent
  • navigate to a non-matching path
  • -> the component as well as the notFoundComponent gets rendered

Expected behavior

I would expect the behavior to be the same in both scenarios.

Screenshots or Videos

No response

Platform

  • Version: 1.52.5

Additional context

No response

Activity

  1. SeanCassiere commented on Sep 3, 2024

    @SeanCassiere
    Member

    Please attach a valid minimal reproduction showing off the issue in question.

    Edit: Link to a stackblitz starter - https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based

  2. lo1tuma commented on Sep 4, 2024

    @lo1tuma
    ContributorAuthor

    I’ve used the quickstart-code-based as a template. Here is the adjusted version that demonstrates the issue https://stackblitz.com/edit/github-bfat87?file=src%2Fmain.tsx

    Steps to reproduce:

    • In the browser when you are on the home page
    • click the "About" link
    • -> you see the not found page without menu
    • click on "back to home"
    • click on "Non-Existing Page" link in the menu
    • -> you will see the not-found page but this time with menu
  3. added
    bugSomething isn't working
    and removed on Sep 4, 2024
  4. SeanCassiere commented on Sep 4, 2024

    @SeanCassiere
    Member

    Throwing a notFound error in a route's loader, outputs the following route-tree.

    <root.NotFoundComponent />
    

    Navigating to a route that DOES NOT EXISTS in the route-tree, results in this route-tree.

    <root.Component>
      <root.NotFoundComponent />
    </root.Component>
    

    Note that this configuration does not have a defaultNotFoundComponent.

    By default the Router has the setting of notFoundMode: 'fuzzy', where the router traverses up the tree until it finds the nearest notFoundComponent (which in this case would be the one configured on the root route).

  5. lo1tuma commented on Sep 4, 2024

    @lo1tuma
    ContributorAuthor

    Thanks for the further investigation and writing a test-case @SeanCassiere. I haven’t thought about the non-async case.

    My expected behavior would be that the behavior is consistent across all scenarios, so either the NotFoundComponent should be always wrapped or never.

  6. LadyBluenotes commented on Jul 11, 2026

    @LadyBluenotes
    Member

    @pupuking723, would you mind taking a look and letting us know what you find?

    A fix would be welcome if it still reproduces. Please keep it focused on making the root layout consistent between an unmatched path and a loader-thrown notFound(), with regression coverage for both paths if it is still present :)

  7. LadyBluenotes commented on Jul 11, 2026

    @LadyBluenotes
    Member

    Thanks for checking @pupuking723!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions