Next.js Discord

Discord Forum

Nesting Layout Re-Render on Navigation

Unanswered
M7ilan posted this in #help-forum
Open in Discord
Hello, I have a problem where my whole layout.tsx (app\route\[[...slug]]\layout.tsx) re-render on navigation, I use [Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) on that layout and [Optional Catch-all Segment](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments).
## App Structure
[app]
    ├── globals.css
    ├── layout.tsx (RootLayout)
    └── [route]
        └── [[[...slug]]]
            ├── [@Books]
                └── page.tsx
            ├── [@Content]
                └── page.tsx
            ├── [@Records]
                └── page.tsx
            ├── [@Title]
                └── page.tsx
            └── layout.tsx (The layout that re-render on every page navigation)

I did some researching and some people say that it's because the layout is inside a dynamic router, Keep in mind that I use parallel routes in the layout.
## Sample app
I made a sample app the can show the issue:
- https://issue-60037.vercel.app/
- [Repository](https://github.com/M7ilan/nesting-layout-inside-optional-catch-all-segment-uses-parallel-route-reset-on-navigation)
## Related Issues
[#60037](https://github.com/vercel/next.js/issues/60037) (My Issue)
[#48082](https://github.com/vercel/next.js/issues/48082)
[#44793](https://github.com/vercel/next.js/issues/44793)
## Related Docs:
[App Router](https://nextjs.org/docs/app)
[Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)
[Pages and Layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
[Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes)

2 Replies

I problem seems to me caused by next.
Is there a structure that let the layout to use the URL and use the parallel routes at the same time? would be great.