404 Page Not Found Problem in Parallel Routes
Patrick Simonetti
Posted on August 19, 2024
How many people have you heard, "You will need an empty page.tsx
", "should I put to each route an empty page.tsx
?" and if I have 3, 10 ... n of parallel routes?
Nhaaa..
To hell with parallel routes, I prefer to directly import a component into the layout and through the usePathname contextualizes the content of the modal right?
No, there is no more wrong thing. And also if you can reason it this way the solution you simply didn't need a page with a navigation independent of another “slot” and you confused the purpose of the parallel routes/slots with a simple separation of components of a layout/page.
Next JS parallel routes don't work
When you decide to create a new slot, or n slots, you are literally saying that you want to develop in parallel 1 ... n layouts/page.tsx
, from this you already understand how thoughtful a choice it must be.
Problem behind default.jsx
So you need for example a @modal
that when you navigate in it doesn't affect the navigation of the home page that is underneath, but at the same time in case of refresh to the current modal navigation url or trivially at the first load we have to tell all our slots
how they have to compose themselves at each url segment.
That's why in most cases, as in a modal, the most important thing to do is a default.tsx
at the first segment level, so that the development perspective is reversed. That is, write only the segments that we want the modal to action and not think about putting empty all the ones where it is not used.
Problem behind catch all [[...all]]
Get this error You cannot define a route with the same specificity as a optional catch-all route ("/" and "/[[...all]]"). weird because it is parallel route
app
├── @modal
│ └── [[...all]]
├── layout.tsx
└── page.tsx
Unfortunately, there has not yet been a direct explanation/solution to this problem, but it can simply be solved
by writing it in the same but more extensive way as follows
app
├── @modal
│ ├── [...all]
│ └── page.tsx
├── layout.tsx
└── page.tsx
I hope this has been of some help to you on the level of conceptual clarification, if not I am available in the comments
Posted on August 19, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.