mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jimmy LaiandGitHub
4024b25e8c
This PR fixes a bug where parallel routes would not apply appropriately on navigation when used within slots.
The following scenarios:
```
/foo
/bar
/@slot
/[...catchAll]
```
or
```
/foo
/[...catchAll]
/@slot
/bar
```
will now function correctly when accessing /foo/bar, and Next.js will render both /bar and the catchall slots.
The issue was that the tree constructed by `next-app-loader` for a given path, /foo/bar in the example, would not include the paths for the catch-all files at build time. The routing was done 1-1 when compiling files, where a path would only match one file, with parallel routes, a path could hit a defined path but also a catch all route at the same time in a different slot.
The fix consists of adding another normalisation layer that will look for all catch-all in `appPaths` and iterate over the other paths and add the relevant information when needed.
The tricky part was making sure that we only included the relevant paths to the loader: we don't want to overwrite a slot with a catch all if there's already a more specific subpath in that slot, i.e. if there's /foo/@slot/bar/page.js, no need to inject /foo/@slot/bar/[...catchAll].
One thing that is not supported right now is optional catch all routes, will add later.
fixes #48719
fixes #49662
25 lines
539 B
TypeScript
25 lines
539 B
TypeScript
import Link from 'next/link'
|
|
|
|
export default function Layout({ children, slot }) {
|
|
return (
|
|
<div>
|
|
<div>Main content</div>
|
|
<div id="main">{children}</div>
|
|
<div>
|
|
Slot content:
|
|
<div id="slot-content">{slot}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="/parallel-catchall/foo">foo</Link>
|
|
</div>
|
|
<div>
|
|
<Link href="/parallel-catchall/bar">catchall bar</Link>
|
|
</div>
|
|
<div>
|
|
<Link href="/parallel-catchall/baz">catchall baz</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|