Docs: parallel routes must provide a default.js file or else it will throw a 404 error

[Fredkiss3]

What is the improvement or update you wish to see?

When using parallel routes, if someone provide a child under the parent route, when navigating to the child route, next will show a 404 page instead of the page, i have noticed that adding a default.js fixes this.

dashboard
├── @user
│   ├── page.js
│   └── default.js <-- should add this, if not specified the user will have a 404 when navigating to dashboard/child-route
├── child-route
│       └──  page.js
├── layout.js
└── page.js

I think this should be added to the docs.

It must also be noted that it parent layout.js does not render the {user} prop inside the JSX, navigating to dashboard/child-route will work normally, but the @user parallel page will not be shown when navigating to /dashboard.

This should be highlighted in the docs as users could easily stumble on this error.

Is there any context that might help us understand?

N/A

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/routing/parallel-routes#defaultjs

[defrex]

I ran into this problem as well. It also seems like, to get the page to load on hard refresh, I needed to add a default.tsx parallel to the layout.tsx file.

I literally just added this to make it work.

import Page, { PageProps } from './page'

export default async function Default(props: PageProps) {
  return (
    // @ts-expect-error Async Component
    <Page {...props} />
  )
}

Seems like that should be the generic default when unspecified, IMO.

[Nickman87]

Wow, nice catch, it is also very unintuitive for me why we need all these default pages... I mean, if you don't know which parallel part to render, by default it should just render nothing, as we are doing now, OR fallback to the page that is already defined there.

[y0zong]

it's not work in complex case like more than one level or Catch-all Segments, it seems parallel route implementation is a bit confusing :(
when add default it will always show default content in parallel routes when refresh, for example

url	match	should match	work
/p1	default	[p]/page	no
/p2	default	[p]/page	no
/p3	p3/page	p3/page	yes

If this is how it's designed, it's not a good pattern

dashboard
├── @user
│   ├── [p]
│   │   └── page.js
│   ├── p3
│   │   └── page.js
│   └── default.js
├── layout.js
├── p1
│   ├── page.js
├── p2
│   ├── page.js
├── p3
│   ├── page.js
└── page.js

[jvanmaaren]

FYI this does not seem to work when you use the route group hack and refresh the page

edit: Nevermind, this has been fixed, the route group hack isn't anymore 👍

[ztanner]

Looks like some docs were added on this here!

[Fredkiss3]

thank you @ztanner i am closing this issue

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.