Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lo1tuma opened this issue Sep 3, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@lo1tuma
Copy link
Contributor

lo1tuma commented Sep 3, 2024

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

@SeanCassiere SeanCassiere added the information needed Further information is requested label Sep 3, 2024
@SeanCassiere
Copy link
Member

SeanCassiere commented Sep 3, 2024

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

@lo1tuma
Copy link
Contributor Author

lo1tuma commented Sep 4, 2024

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

@SeanCassiere SeanCassiere added bug Something isn't working and removed information needed Further information is requested labels Sep 4, 2024
@SeanCassiere
Copy link
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).

@lo1tuma
Copy link
Contributor Author

lo1tuma commented Sep 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants