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.

Incorrect path matching when using nested paths

See original GitHub issue

I’m running into some unexpected problems when defining nested paths. I was hoping you could set me on the right path (no pun intended 😄). I have created a small example to demonstrate.

Problem

var Router5 = require('router5').default;
var router = new Router5();

router
  .addNode('personList', '/persons/')
  .addNode('personDetail', '/persons/:personId');

var match = router.matchPath('/persons/jwoudenberg');
console.log(match); //=> null

In the example above, the path /persons/jwoudenberg does not result in a match. I would expect it to match the personDetail route.

Analsysis

After looking through the code I see what happens. The path is a partial match with the personList route. Router5 looks to complete the match by going through the child router of personList, but none exist, so it gives up. Removing the personList route makes /persons/jwoudenberg resolve correctly.

Solutions

I can imagine I could get it to work by defining personDetail as a child of personList. I was kind of hoping though that I could get around using this extra functionality, which I otherwise don’t need. Certainly for new users, I think this can be confusing (as it was for me 😄).

Some possible solutions I see:

  1. Sort routes by the amount of segments they contain in descending order before matching. That way the most specific routes should be matched first.
  2. Don’t bail on the first failing partial match. If there’s child routes left that haven’t been tried yet, continue with those.

I’m looking forward to hearing your thoughts!

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

4reactions
trochcommented, Mar 21, 2016

OK, I’ll look into this this week.

2reactions
trochcommented, Mar 29, 2016

Fixed in version 3.0.2.

There is one edge case left which requires a bit more work (along the lines of what @jwoudenberg mentioned with Don’t bail on the first failing partial match. If there’s child routes left that haven’t been tried yet, continue with those.). Considering @jwoudenberg example:

postNew:    /blogs/:blogId/posts/new
postDetail: /blogs/:blogId/posts/:postId

Everything works as long as postId doesn’t start with 'new'. Otherwise @jwoudenberg other case (with persons) and @tokenvolt example should be working fine.

For those interested: https://github.com/troch/route-node/blob/master/modules/RouteNode.js#L58-L83 for the improved sorting logic.

If any issues let me know. Thanks for your patience.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nested Routes with path="*" yields incorrect warning #7624
I've not been able to figure out what it means, or how to fix it. Being that there is no path matching /...
Read more >
React Router not matching a nested route - Stack Overflow
The problem is with the routes nested inside "ProjectView". The IndexRoute is working, so, when I access "http://localhost:3000/projects/ ...
Read more >
Use matchPath to Match Nested Route Paths in Parent Routes ...
In this lesson we'll use the `matchPath` function exported by react-router to find active nested routes inside of a parent component.
Read more >
Path Syntax - Router5
Path Syntax. router5 uses path-parser for parsing, matching and generating URLs ... You can define absolute nested paths (not concatenated with their ...
Read more >
React Router DOM: How to handle routing in web apps
In this post, you have learned how to set up React Router, its most important components, how routes work, and how to build...
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