question-mark
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 info and problem reproduction

See original GitHub issue

I apologize in advance if I’m wrong to open the issue and I shouldn’t have done it here. But I think it really concerns the basics of Navaid.

I’m also ready to open and update a wiki page for all newcomers like me.

THE PROBLEM:

I started from svelte-demo (https://github.com/lukeed/svelte-demo) and I’m trying to use nested routes for a list/detail view.

REPRODUCTION: https://codesandbox.io/s/quizzical-dirac-2d0qy

To come to the problem you should:

  • open the console from the tab on the bottom
  • click on “Go to Teams Page”
  • click on “Go to Team 1 Page” (or others)
  • click on “Go to Team 1 Page” (or others) from the list
  • as you can see in console until now just four messages from “App draw()” and one “PageTeamRoute draw()”
  • now you can clear the console
  • click on “Go to Player 1 Page” (or others) from the list
  • you can see now the problem: 4 messages in console:

image

Why?

Am I correctly using Navaid with nested routes?

Is this correct in App.svelte?

.on("team/*", obj => draw(PageTeam, obj))

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
lukeedcommented, Jun 3, 2019

Well, you also have two handlers defined for every team/* route.

Once in the App and once in the PageTeam

1reaction
lukeedcommented, Jun 3, 2019

Personally I would move everything up to the App router. Since you already have & known all the components ahead of time, to me, it doesn’t really make sense to sanction things off into units.

As of now, they’re all one App.

For me, the separate (sub)router approach make sense for when you are dynamically loading some variable set of widgets into your application, each of which will have their own routing needs. Aka, unknown, unrelated, and/or physically separate things. For example, in my mind, I’m thinking of a WordPress editor that loads in different content blocks from different authors, each of which has their own series of config/states tied to URL segments.

Since you’re developing all of this together, I would define the router together. Personally.

Now, after #12, you can keep this approach but remove team/* from App. That is the redundant one but still fires on every URL change within that namespace

Read more comments on GitHub >

github_iconTop Results From Across the Web

When to use nested routes in react? - Stack Overflow
I suppose you are asking why one would use nested routes versus a flat list of routes with each path explicitly fully "quantified"....
Read more >
[react-router-6] Nested Routers produce wrong parametrized ...
I was able to debug the reproduction, and indeed the problem seems to be the use of Descendant Routes. I have tried two...
Read more >
The Guide to Nested Routes with React Router - ui.dev
In this comprehensive, up-to-date guide, you'll learn everything you need to know about creating nested routes with React Router.
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
How to deal with backend nested routes - Ember.JS
In a Rails app there are the nested routes defined as follows: #routes.rb ... this.get('flashMessages').info('New language added with ...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found