mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
270a9db056
A common pattern for parallel routes is breadcrumbs. For example, if I
have a lot of dynamic pages, and I want to render a parallel route that
renders as a breadcrumb to enumerate those dynamic params, intuitively
I'd reach for something like `app/@slot/[...allTheThings]/page.tsx`.
Currently however, `[...allTheThings]` would only match params to a
corresponding `app/[allTheThings]/page.tsx`. This makes it difficult to
build the breadcrumbs use-case unless you re-create every single dynamic
page in the parallel route as well.
This adds handling to provide unmatched catch-all routes with all of the
params that are known. For example, if I was on
`/app/[artist]/[album]/[track]`, and I visited `/zack/greatest-hits/1`,
the parallel `@slot` params would receive: `{ allTheThings: ['zack',
'greatest-hits', '1'] }`
Fixes #62539
Closes NEXT-3230
18 lines
350 B
TypeScript
18 lines
350 B
TypeScript
import Link from 'next/link'
|
|
|
|
export default async function Home() {
|
|
const artists = ['artist1', 'artist2', 'artist3']
|
|
return (
|
|
<div>
|
|
<h1>Artists</h1>
|
|
<ul>
|
|
{artists.map((artist) => (
|
|
<li key={artist}>
|
|
<Link href={`/${artist}`}>{artist}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|