defaultComponent is never rendered if exact match is not found

[Jarzka]

Describe the bug

I have defined defaultComponent that should be rendered when exact route match is not found:

const router = createReactRouter({
  routeConfig,
  defaultComponent: NotFound,
});

Now if I go to /seppo, which is a valid path if my application (route and component is defined), everything works fine.

However, if I go to /seppo/invalid, I would except NotFound to be rendered since seppo/invalid is not defined anywhere. The end result is, however, that a component for /seppo is rendered. It seems that React Router does not care about exact matches, but matches all invalid paths under the parent url to the parent url. I.e. /seppo path works like/seppo/* even if there is no wildchard in /seppo.

Is this the correct behaviour by design?

If it is, how do I change it so that only exact matches are rendered to their respective components and everything else fallbacks to defaultComponent?

In the end, I want to create a 404 page that is rendered when the path is invalid. I did not find an example of this anywhere.

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

defaultComponent should be rendered when exact match is not found.

Screenshots or Videos

No response

Platform

macOS Monterey

Additional context

No response

[tannerlinsley]

This mostly seems like a bad documentation symptom (or lack of docs, TBH). I've since documented the route matching patterns: https://tanstack.com/router/v1/docs/guide/route-matching

[Jarzka]

Thank you for improving the documentation. However, I think the actual use case still remains unclear: How do I implement a generic 404 page if exact route match is not found?

[tannerlinsley]

You use a catch all/splat/wildcard route path: “*” or “$” Tanner Linsley

…

On Feb 6, 2023 at 12:05 AM -0700, Jari Hanhela ***@***.***>, wrote: Thank you for improving the documentation. However, I think the actual use case still remains unclear: How do I implement a generic 404 page if exact route is not found? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[Jarzka]

Ah yes of course. Thank you!

[toddgeist]

does anyone have an example of how to do this. Despite reading the above mentioned documentation I still don't know if a universal catch all 404 is even possible.

[Jarzka]

I defined my wildcard route like this and it works:

const pageNotFound = new Route({
  getParentRoute: () => parentRoute
  path: "/*",
  component: lazy(() => {
    return import("./NotFound")
      .then((module) => ({
        default: module.PageNotFoundErrorPage,
      }))
      .catch((e) => {
        return handleDynamicImportError(e);
      });
  }),
});