Next.js Discord

Discord Forum

Is it possible to have parallel routes read the same parameters?

Unanswered
Mugger Crocodile posted this in #help-forum
Open in Discord
Mugger CrocodileOP
I have a layout with child components- header, 2 column layout and footer. The 2 column layout contains the child and uses the router to get the page params. The header has a common title component that needs to be able to respond to the page parameters. It works fine on page refresh but didn't react to route changes. I setup a parallel route with the title component and cached the function and it seems to work in the nested route but NOT in the one above. 

app
├── chat
│   ├── page.tsx
│   └── [id]
│       └── page.tsx
├── @title
│   ├── chat
│   │   ├── page.tsx <- **when visiting /chat this is not invoked**, @title/default.tsx is invoked
│   │   └── [id]
│   │       └── page.tsx <- **this page is called and params are read when visiting /chat/[id]**
│   └── default.tsx 
└── layout.tsx

I can hack it by adding the request.nextUrl.pathname to the header in the middleware then read it in "@title/default.tsx" - but this is less that idea.

If this isn't possible (although it works for /chat/[id] perfectly - is there another way to get the route params in the a non main child component of a layout? In the nextjs tutorials it says to cache results of fetches, which is happening, but what if those fetches in server components require a component of the url state?

3 Replies

@Mugger Crocodile I have a layout with child components- header, 2 column layout and footer. The 2 column layout contains the child and uses the router to get the page params. The header has a common title component that needs to be able to respond to the page parameters. It works fine on page refresh but didn't react to route changes. I setup a parallel route with the title component and cached the function and it seems to work in the nested route but NOT in the one above. app ├── chat │ ├── page.tsx │ └── [id] │ └── page.tsx ├── @title │ ├── chat │ │ ├── page.tsx <- **when visiting /chat this is not invoked**, @title/default.tsx is invoked │ │ └── [id] │ │ └── page.tsx <- **this page is called and params are read when visiting /chat/[id]** │ └── default.tsx └── layout.tsx I can hack it by adding the request.nextUrl.pathname to the header in the middleware then read it in "@title/default.tsx" - but this is less that idea. If this isn't possible (although it works for /chat/[id] perfectly - is there another way to get the route params in the a non main child component of a layout? In the nextjs tutorials it says to cache results of fetches, which is happening, but what if those fetches in server components require a component of the url state?
aardani
Interesting, have you cleared .next folder and retry? coz parallel routes are a bit sticky on dev
@aardani Interesting, have you cleared `.next` folder and retry? coz parallel routes are a bit sticky on dev
Mugger CrocodileOP
so, my monorepo deletes .next folders as part of a clean command and it didn't work so I figured it was not the problem. I gave it one more try after you mentioned this and it seems to be working now.

I'm going to test more and if I still see an issue put up an example repo. I have to figure this is a design pattern people are looking to use as it allows for a more global context on the server. It still seems a bit flaky after a full refresh.