Fallback/404 Child Route Matching

[reintroducing]

I'm trying to figure out how to add a proper 404 route handler for ALL urls that don't exist. It seems like, to effectively do that, you have to manually add a 404 route at every level of routing (root level, then inside of any children levels as well. I've put together an example to show this here: https://codesandbox.io/s/distracted-hofstadter-kxrjxu?file=/src/index.tsx

If you go to /foo it will show the error route, but if you go to /about/foo it will render the about route with nothing for the outlet. I was expecting that, because I had not defined the route at all, it would just render the NoMatch element like the top level /foo does. How can I just define the 404 route once and have it permeate throughout all route children so that I don't have to add it into every children array for every set of routes I'm creating?

I tried looking through the docs but I could not find anything in regards to this and its seems like the fuzzy matching of child routes is what is preventing this from happening. Is there a pattern/best practice for this?

[XpamAmAdEuS]

+1 on default not found component implementation

[bhaugeea]

👍 I agree. It seems like each route should get an optional notFoundComponent property, and if not supplied then the router starts climbing up the tree to find one that is. The full not-matched URL remains displayed in the address bar.

[tannerlinsley]

I think this would be a great addition

[bhaugeea]

If you have any words of advice on implementation, I'll take a stab at it.

[martijnmichel]

I had the same problem but just thought of a solution:

{!find(routes, (r) => location.current.pathname === r.path) && (
   <Navigate to="./404" />
 )}

I'm using lodash for this, ofcourse you can also do it with vanilla js.

or  useEffect(() => {}) instead of <Navigate />

[bhaugeea]

This works, and I can't think of a better option with the existing feature set, but it would be nice to preserve the not-matched URL in the address bar.

[MKSisti]

any solution to this yet ? @reintroducing

[reintroducing]

I have not used the router for a long time and you probably want to direct your question at the author of the package instead.