Parallel route not updating on client navigation
Answered
Derock posted this in #help-forum
DerockOP
I have a parallel route defined in
app/(dashboard)/@stats/page.tsx
that's included in app/(dashboard)/layout.tsx
. This works fine, the parallel route renders when I visit /
, but if I navigate to a different page via a Link element (lets say /projects
), the parallel route continues to be rendered even though it should only render at /
. If i hard-reload, the page, the parallel route disappears. Adding a app/(dashboard)/@stats/default.tsx
does not help, nor does adding a specific app/(dashboard)/@stats/projects/page.tsx
. No matter what those pages return, they do not get rendered on the client and are only rendered if I hard-reload. It also doesn't change anything if those pages are marked as "use client";Answered by Derock
if I move it all into its own route group, it works
/app/(dashboard)
|- /(home)
| |- @stats
| | `- page.tsx
| |- layout.tsx
| `- ...
`- ...
2 Replies
DerockOP
if I move it all into its own route group, it works
/app/(dashboard)
|- /(home)
| |- @stats
| | `- page.tsx
| |- layout.tsx
| `- ...
`- ...
Answer
it's the expected behaviour:
Soft Navigation: During client-side navigation, Next.js will perform a partial render, changing the subpage within the slot, while maintaining the other slot's active subpages, even if they don't match the current URL.
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#active-state-and-navigation