[[...catchAll]] route doesn't work with parallel route

[MathiasStrohkirch]

Link to the code that reproduces this issue

https://github.com/MathiasStrohkirch/nextjs-parallel-routes-catch-all-bug

To Reproduce

1. Start app with npm run dev
2. Go to /dashboard
3. Click "go to /dashboard/add/1" link. This page works
4. Refresh. 404

Current vs. Expected behavior

Current behavior:
404 error after hard navigation to /dashboard/add/1

Expected behavior:
dashboard should render the optional catchAll page and @modal should render the add/[id] page

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Oct 5 21:02:42 UTC 2023
Binaries:
  Node: 18.17.1
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.13 // Latest available version is detected (14.1.1-canary.13).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I'm new to next, so please let me know if I am misunderstanding something!

_NEXT-2312

[MrOxMasTer]

https://nextjs-forum.com/post/1206861195336744970 Still haven't fixed the catchAll

[MrOxMasTer]

Surprisingly, the problem with returning from the modal window was ignored altogether. The official example still doesn't work.

I am writing here because all the topics related to this problem have been closed and have not been resolved in any way. Maybe at least they'll notice here:

#62430

Even without [[..catchAll]] and using [...catchAll] + page.tsx, it still doesn't work. neither client-side nor server-side

[markedwards]

Currently working around this with this structure:

/layout.tsx
/page.tsx
/[...catchAll]/page.tsx

And both page files just have dummy null components, with the real code in the layout.tsx.

Would be nice to not have to do this, though.

[markedwards]

Is there any chance of this bug being fixed? This severely limits the usage of parallel routes.

[beckerei]

https://nextjs-forum.com/post/1206861195336744970

Currently working around this with this structure:

/layout.tsx
/page.tsx
/[...catchAll]/page.tsx

And both page files just have dummy null components, with the real code in the layout.tsx.

Would be nice to not have to do this, though.

Doing it similar. This has the downside of getting a different instance of the page, because root page and the catchall page are different. In our case the suspense boundary kicks in again. Not a very pleasant experience.
We are reading search params in the page and loading data based on the params, so we can't have everything in the layout.

[joshuajaco]

We have the following folder structure.

/app/foo/@panel/[id]/page.tsx
/app/foo/@panel/default.tsx
/app/foo/[[...slug]]/page.tsx
/app/foo/layout.tsx

In 14.1.4 this works as expected:

• ✅ /foo renders /app/foo/@panel/default.tsx and /app/foo/[[...slug]]/page.tsx
• ✅ /foo/bar renders /app/foo/@panel/[id]/page.tsx and /app/foo/[[...slug]]/page.tsx

However in 14.2.0:

• ✅ /foo renders /app/foo/@panel/default.tsx and /app/foo/[[...slug]]/page.tsx
• ❌ /foo/bar results in a 404

This was a breaking change in a minor release that hasn't been fixed in almost 5 months.
What is the status of this? Will this be fixed some time in the future?
This is still blocking us from updating to 14.2.* and is extremely frustrating.

[ItsWendell]

Probably related: #71086