Next.js Discord

Discord Forum

How to use parallel routes properly?

Unanswered
Havana posted this in #help-forum
Open in Discord
HavanaOP
Hi everyone, I am trying to create a dashboard with a sidebar using parallel routes in this following structure but I keep getting 404 whenever I navigate to localhost:3000/accounts

Isn't it possible to use a parallel route on a parent layout and create children routes that will render on the parent layout?

5 Replies

@Havana Hi everyone, I am trying to create a dashboard with a sidebar using parallel routes in this following structure but I keep getting 404 whenever I navigate to `localhost:3000/accounts` Isn't it possible to use a parallel route on a parent layout and create children routes that will render on the parent layout?
ᴉuɐpɹɐɐ
You need to have /@sidebar/accounts/page.tsx in order for it to work
you can also use
/@sidebar/[...slug]/page.tsx to catch all routes in the parallel side of the routing if you dont want to create duplicates for all sub pages
@Havana I assume I can’t have a sidebar for all my routes? Or is the mental model I am not getting?
ᴉuɐpɹɐɐ
you can have a side bar for all your routes by 2 ways:
either put it in /layout.tsx
or put it in /@sidebar/[...slug]/page.tsx
Western thatching ant
The issue with this approach is it fails if you need to also have @sidebar rendered on the root page. Optional catchall routes are not supported with slots, you end up with an error.

So for instance:
app/layout.tsx
app/page.tsx
app/foo/page.tsx
app/@navigation/[[...catchAll]]/page.tsx


The above does not work. So if you need parallel route which survives across all nav, there appears to be no way.
Western thatching ant
the issue tracking this bug is https://github.com/vercel/next.js/issues/61206