Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested routes syntax means you can't have a single top-level 404 handler

See original GitHub issue

When you take the example project in this repo, App.svelte says that everything under blog/* is a valid url, to be handled by the Blog component. The Blog component only accepts first, second and third as valid sub-URLs. What if you go to /blog/fourth? This needs to be “caught” inside the Blog component with a pathless <Route>, it can’t be handled in the main App.svelte file.

That means that if you have multiple “top level routes” that all accept /* to be handled in nested routers, you now have to add 404 handling to all these nested routers. Worse, if your nested routers actually show nested content, this means that your 404 component is now potentially shown inside of (multiple) parent layouts.

It’s too easy to forget to add 404 handling to a subrouter, because you expect the top level router to catch these URLs. And showing the 404 page inside a nested layout is often not great either.

As an example, when I go to /campaigns/abc/locations/nonexistingid I can only show the 404 component inside my nested layout, since the ``/campaigns/abc/locations` is valid and handled by 2 levels of routers.

Screen Shot 2020-04-19 at 01 28 35

And again, it needs to be handled like this inside every nested router.

Worse, it makes it impossible to catch some invalid routes due to the need to use /* in the parent router. For example inside my location detail page I have a route for the edit modal.

  <a href="/locations/{}/edit">edit</a>

  <Route path="edit">
    <EditModal on:close={() => navigate(`/locations/${}`)} {location} />

But for this to work, the parent router needs to be like this:

  <Route path="{}/*"><Location {location} /></Route>

But this means that if I go to /campaigns/abc/locations/xyz/lalalala, there is no 404 shown anywhere, it just shows the location detail page as if nothing happened. Maybe not a huge problem in this particular instance, but you shouldn’t be able to type in random stuff behind a url and it just keeps on working.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

robomaticcommented, Apr 21, 2020

Some further issues. Seems from within nested routers default routes the path must include the root route then nest route. <Route><button on:click={()=> navigate('root/nest1')}>button</button></Route> However from within named nested route you can leave that root route out. <Route path="nest1"><button on:click={()=> navigate('nest2')}>button</button></Route>

EmilTholincommented, May 19, 2020

Hi @kevinrenskers!

Yes, this is very unfortunate problem that we have no satisfying solution to at the moment. It is complicated further by that this needs to work synchronously in one pass on the server as well, so having fallback handling that bubbles up to the nearest parent route is (to my current understanding) impossible.

I will look into this more seriously when I have the time and see if there is something that can be done about it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nested routing is not working in React Router v6
The default behavior of React Router fails to render multiple child routes with single Outlet. For example - When there is requirement to ......
Read more >
React router dom: Nested routes - DEV Community ‍ ‍
In this tutorial, we are going to build a nested route, ... and a NoMatch.js as a 404 page to see if we...
Read more >
Handle 404 pages for nested routes in react-router
One of the major challenge with nested routes is to handle Not found pages. Now as the routes are nested , there is...
Read more >
Ultimate React Router v6 Guide
All you need to do is create a new component to store your nested Routes this component should have a Routes component and...
Read more >
A bluffer's guide to React Router v4 - freeCodeCamp
Nesting routes is exactly the same as creating high-level routes, except for defining a BrowserRouter component (as your nested routes are ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found