Is it possible to use parallel routes with dynamic routes?
Answered
CodigoK 401 posted this in #help-forum
This doubt arose when I saw the functionality of the parallel routes and a need for the development of my web site
Answered by CodigoK 401
I don't know if my assessment is correct but in my case this is what worked for me for what I wanted to do in my project.
1. My application in the root path had no page file only the layout.tsx file.
2. I had 2 parallel routes one was a normal page and the other one contained the dynamic route.
It is important to say that if I did not use the dynamic routes and it was only parallel routes it would not present any problem.
Solution.
1. I deleted the parallel path that had the normal page, passing its content to a new page file created in the root of the path.
2. Create a file in the root of the path called default.tsx and import by default the page.tsx that is at the same level.
note: If I try to add one more parallel path it gives error. It is also worth saying that I don't know if this is the best way because in the official documentation there is nothing about using parallel and dynamic paths together.
1. My application in the root path had no page file only the layout.tsx file.
2. I had 2 parallel routes one was a normal page and the other one contained the dynamic route.
It is important to say that if I did not use the dynamic routes and it was only parallel routes it would not present any problem.
Solution.
1. I deleted the parallel path that had the normal page, passing its content to a new page file created in the root of the path.
2. Create a file in the root of the path called default.tsx and import by default the page.tsx that is at the same level.
note: If I try to add one more parallel path it gives error. It is also worth saying that I don't know if this is the best way because in the official documentation there is nothing about using parallel and dynamic paths together.
20 Replies
You mean to have @parallel/…/[slug]/page.tsx?
I think it’s possible I’ve seen people using Parallel + Dynamic routes to dynamically render the breadcrumbs for a given page.
I think it’s possible I’ve seen people using Parallel + Dynamic routes to dynamically render the breadcrumbs for a given page.
@LuisLl You mean to have @parallel/…/[slug]/page.tsx?
I think it’s possible I’ve seen people using Parallel + Dynamic routes to dynamically render the breadcrumbs for a given page.
I have been trying several ways and it always throws 404. In the forums and discussions there doesn't seem to be a solution or example as such. But also nothing that says it can't be done.
But this approach used the catch all […all], so maybe that’s the only possible way?
@LuisLl https://www.openstatus.dev/blog/dynamic-breadcrumb-nextjs
The problem is when it is more than +1 parallel route.
If I comment on one of the two parallels, it works.
Fixed 
@LuisLl What was it?
I don't know if my assessment is correct but in my case this is what worked for me for what I wanted to do in my project.
1. My application in the root path had no page file only the layout.tsx file.
2. I had 2 parallel routes one was a normal page and the other one contained the dynamic route.
It is important to say that if I did not use the dynamic routes and it was only parallel routes it would not present any problem.
Solution.
1. I deleted the parallel path that had the normal page, passing its content to a new page file created in the root of the path.
2. Create a file in the root of the path called default.tsx and import by default the page.tsx that is at the same level.
note: If I try to add one more parallel path it gives error. It is also worth saying that I don't know if this is the best way because in the official documentation there is nothing about using parallel and dynamic paths together.
1. My application in the root path had no page file only the layout.tsx file.
2. I had 2 parallel routes one was a normal page and the other one contained the dynamic route.
It is important to say that if I did not use the dynamic routes and it was only parallel routes it would not present any problem.
Solution.
1. I deleted the parallel path that had the normal page, passing its content to a new page file created in the root of the path.
2. Create a file in the root of the path called default.tsx and import by default the page.tsx that is at the same level.
note: If I try to add one more parallel path it gives error. It is also worth saying that I don't know if this is the best way because in the official documentation there is nothing about using parallel and dynamic paths together.
Answer
The default.tsx file allows reloading on the path /rooms/[id] to display the content otherwise it would be error 404.
Remember, check if the hierarchy it's valid
- no multiplies root pages
- default.tsx in parallel routes
- no multiplies root pages
- default.tsx in parallel routes
Wait isn’t page.tsx rendering the page contents anyway?
That’s interesting:O
Quite interesting. I will continue researching the topic is quite extensive and opens up incredible possibilities.
@CodigoK 401 Here is an example that helped me a lot
https://x.com/asidorenko_/status/1725548472839950553
Good idea, i understand it now, but the interception routes have caused some minor problems so far
@Losti! Good idea, i understand it now, but the interception routes have caused some minor problems so far
As developers we must look for the best options always expecting that something may fail and we will have to find a solution. That's why development is fun
ye