<Link> is changing URL but page content is not changing
Answered
Himalayan posted this in #help-forum
HimalayanOP
I've got these routes:
Each of these routes work perfectly in isolation. However, when the user navigates (using
I'm 100% sure this is me not understanding something about sub-routes, so I'd be super grateful if someone could please show me the error of my ways! Many thanks 🙂
/locations/index.tsx
/locations/edit/[locationid].tsxEach of these routes work perfectly in isolation. However, when the user navigates (using
Link or router.push) from the second route to the first (i.e. back from a single location to the locations index), the URL in the browser changes, but the page content does not.I'm 100% sure this is me not understanding something about sub-routes, so I'd be super grateful if someone could please show me the error of my ways! Many thanks 🙂
Answered by Himalayan
@joulev Arghhh, it was the a child component updating the parent's state incorrectly causing an endless re-render loop, which was presumably getting in the way of route changing process somehow. Doh! Thank you so much for your help 🙂
12 Replies
@Himalayan I've got these routes:
/locations/index.tsx
/locations/edit/[locationid].tsx
Each of these routes work perfectly in isolation. However, when the user navigates (using `Link` or `router.push`) from the second route to the first (i.e. back from a single location to the locations index), the URL in the browser changes, but the page content does not.
I'm 100% sure this is me not understanding something about sub-routes, so I'd be super grateful if someone could please show me the error of my ways! Many thanks 🙂
sounds like a nextjs bug actually. did you try prod mode? (
npm run build then npm start)@joulev sounds like a nextjs bug actually. did you try prod mode? (`npm run build` then `npm start`)
HimalayanOP
Thanks for the suggestion @joulev Yes, exactly the same in prod mode
then can you make a minimal repro repo?
if even in prod mode it suffers from that problem, then i'm fairly certain it is a nextjs bug
HimalayanOP
Sure!
@joulev if even in prod mode it suffers from that problem, then i'm fairly certain it is a nextjs bug
HimalayanOP
Of course, in my minimal repro it works perfectly 😬 At least I now know it's a problem at my end! Is there any way of debugging what's happening during routing? I've tried making use of the various events associated with routing, but the only ones that are actually occurring are
routeChangeStart & beforeHistoryChange, none of the other events fire@Himalayan Of course, in my minimal repro it works perfectly 😬 At least I now know it's a problem at my end! Is there any way of debugging what's happening during routing? I've tried making use of the various events associated with routing, but the only ones that are actually occurring are `routeChangeStart` & `beforeHistoryChange`, none of the other events fire
it's a problem at my endnot necessarily. i still suspect this to be a nextjs bug, it's just that your minimal repo fails to reproduce it.
a way to make a minimal repo that can reproduce the problem is by starting from the problematic repo you are having right now, then you delete irrelevant parts + simplify the repo gradually. at one point the problem will vanish, that's where you know where the problem is hiding at
HimalayanOP
@joulev Thanks very much for your help. I'm going to try your suggestion and will post the outcome here 🙂
HimalayanOP
@joulev Arghhh, it was the a child component updating the parent's state incorrectly causing an endless re-render loop, which was presumably getting in the way of route changing process somehow. Doh! Thank you so much for your help 🙂
Answer
i see, i assume you found the bug and resolved the issue, glad to hear you fixed that
yeah the method of making a minimal repro repo is sometimes also an effective debugging method
@joulev yeah the method of making a minimal repro repo is sometimes also an effective debugging method
was following the thread and this really helps mate ðŸ™