Next.js Discord

Discord Forum

Parallel route not updating on client navigation

Answered
Derock posted this in #help-forum
Open in Discord
Avatar
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
 |    `- ...
 `- ...
View full answer

2 Replies

Avatar
if I move it all into its own route group, it works
/app/(dashboard)
 |- /(home)
 |    |- @stats
 |    |    `- page.tsx
 |    |- layout.tsx
 |    `- ...
 `- ...
Answer
Avatar
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