Next.js Discord

Discord Forum

How to setup parallel route next to dynamic route without reloading

Unanswered
Albacore posted this in #help-forum
Open in Discord
AlbacoreOP
I have a need to setup below routing:
/groups/[groupId]

groupId is dynamic and will refetch data when the id changes. I also require displaying a parallel route next to every single dynamic page that shows some data (but only on the /groups/[groupId] routes)

E.g. groups/recent, groups/1, groups/2, etc. I don't have a groups page, only with the id.

I tried setting up the route as in my picture:
groups/[groupId] - page
groups/[@sideleft] - page + default

Problem is when I visit any dynamic route only the default is loading. Now if I move [@sideleft] under [groupId], it works but the component is refresh whenever id changes. I need that to not rerender as it is just a navigation menu that is only applicable to group dynamic routes. It does do data fetching so it causes loading states to be displayed.

If anyone can kindly provide some guidance on how I can setup the routes to work it would be greatly appreciated.

0 Replies