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.

Early issue with nested `useRoutes`

See original GitHub issue

Sorry for the vague issue but I just thought I would give you a heads up while investigating. Since upgrading to 1.0.0-rc.3 (Also tried rc6) we have been having issues with previously working nested useRoutes.

The basic structure of our app is as follow

An “App” with useRoutes that either maps to a list page or a view entity page basePath is foo/bar/entities Routes are similar to the following

const routes = {
    '/': () => <ListPage />,
    '/:id/*': ({ id }) => (
        <ViewPage id={id} />
    ),
}

A view entity page with useRoutes that maps to 3 tabs within the page, basePath is foo/bar/entities/<id> where id is a numeric id. Routes are similar to the following

const routes = {
    "/tab1": () => <Component1 />,
    "/tab2": () => <Component2 />,
    "/tab3": () => <Component3 />
}

Previously (0.5.8) we were using usePath within one of the tabs (so 2 useRoutes deep) with no problems, it would always return the path we expected (/tab2) Now however, if you land on tab2 (i.e. start a new browser tab at the url foo/bar/entities/1/tab2) usePath will return the correct value (/tab2) But as soon as you navigate to a different tab usePath (called within the tab) starts returning /1/<tabNo>. The basepath in the context is correct (has the id at the end of the path), but it’s like it calculated the path based on the basePath of the router one level higher.

context = { path: '/1/tab2', basePath: 'foo/bar/entities/1' }

I’ll keep adding detail to this issue as I investigate, but I thought it might be possible you have an idea what’s going on.

Thanks

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
yenoiwesacommented, Nov 8, 2019

Bugs happen but great support from maintainers is rare! We all appreciate very much the effort you put in making sure that your library is top notch. Kudos to you @kyeotic!

2reactions
kyeoticcommented, Nov 8, 2019

@micmcg I’ve got a fix, will be publishing under 1.0.0-rc.7.

the useLocationChange refactor has introduced several issues which testing hasn’t caught. I will need to improve test coverage before I can promote the release candidate to final. I appreciate you guys sticking with me through all the bugs this week.

I did add a test that was failing prior to this fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nested routing is not working in React Router v6
I am trying react router v6. As per react training blog, I have created object of routing and passed to useRoutes() : function...
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 >
React Router 6: Nested Routes - Robin Wieruch
A React Router tutorial which teaches you how to use Nested Routes with React Router 6. The code for this React Router v6...
Read more >
possibility to use nested routes with absolute paths ... - GitHub
First of all react-router v5 was advocating using absolute URLs, that's why they are being used across the whole app and it's quite...
Read more >
React Router's useRoutes hook - DEV Community ‍ ‍
To account for nested routes, the object has an optional third key known as children that allows you to list all child routes...
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