-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
support breadcrumb style catch-all parallel routes (#65063)
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
- Loading branch information
Showing
10 changed files
with
163 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
test/e2e/app-dir/parallel-routes-breadcrumbs/app/@slot/[...catchAll]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export default function Page({ params: { catchAll } }) { | ||
return ( | ||
<div id="slot"> | ||
<h1>Parallel Route!</h1> | ||
<ul> | ||
<li>Artist: {catchAll[0]}</li> | ||
<li>Album: {catchAll[1] ?? 'Select an album'}</li> | ||
<li>Track: {catchAll[2] ?? 'Select a track'}</li> | ||
</ul> | ||
</div> | ||
) | ||
} |
3 changes: 3 additions & 0 deletions
3
test/e2e/app-dir/parallel-routes-breadcrumbs/app/@slot/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Page() { | ||
return null | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/parallel-routes-breadcrumbs/app/[artist]/[album]/[track]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page({ params }) { | ||
return ( | ||
<div> | ||
<h2>Track: {params.track}</h2> | ||
<Link href={`/${params.artist}/${params.album}`}>Back to album</Link> | ||
</div> | ||
) | ||
} |
20 changes: 20 additions & 0 deletions
20
test/e2e/app-dir/parallel-routes-breadcrumbs/app/[artist]/[album]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page({ params }) { | ||
const tracks = ['track1', 'track2', 'track3'] | ||
return ( | ||
<div> | ||
<h2>Album: {params.album}</h2> | ||
<ul> | ||
{tracks.map((track) => ( | ||
<li key={track}> | ||
<Link href={`/${params.artist}/${params.album}/${track}`}> | ||
{track} | ||
</Link> | ||
</li> | ||
))} | ||
</ul> | ||
<Link href={`/${params.artist}`}>Back to artist</Link> | ||
</div> | ||
) | ||
} |
17 changes: 17 additions & 0 deletions
17
test/e2e/app-dir/parallel-routes-breadcrumbs/app/[artist]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page({ params }) { | ||
const albums = ['album1', 'album2', 'album3'] | ||
return ( | ||
<div> | ||
<h2>Artist: {params.artist}</h2> | ||
<ul> | ||
{albums.map((album) => ( | ||
<li key={album}> | ||
<Link href={`/${params.artist}/${album}`}>{album}</Link> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
) | ||
} |
18 changes: 18 additions & 0 deletions
18
test/e2e/app-dir/parallel-routes-breadcrumbs/app/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react' | ||
|
||
export default function Root({ | ||
children, | ||
slot, | ||
}: { | ||
children: React.ReactNode | ||
slot: React.ReactNode | ||
}) { | ||
return ( | ||
<html> | ||
<body> | ||
<div id="slot">{slot}</div> | ||
<div id="children">{children}</div> | ||
</body> | ||
</html> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* @type {import('next').NextConfig} | ||
*/ | ||
const nextConfig = {} | ||
|
||
module.exports = nextConfig |
47 changes: 47 additions & 0 deletions
47
test/e2e/app-dir/parallel-routes-breadcrumbs/parallel-routes-breadcrumbs.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { nextTestSetup } from 'e2e-utils' | ||
import { retry } from 'next-test-utils' | ||
|
||
describe('parallel-routes-breadcrumbs', () => { | ||
const { next } = nextTestSetup({ | ||
files: __dirname, | ||
}) | ||
|
||
it('should provide an unmatched catch-all route with params', async () => { | ||
const browser = await next.browser('/') | ||
await browser.elementByCss("[href='/artist1']").click() | ||
|
||
const slot = await browser.waitForElementByCss('#slot') | ||
|
||
// verify page is rendering the params | ||
expect(await browser.elementByCss('h2').text()).toBe('Artist: artist1') | ||
|
||
// verify slot is rendering the params | ||
expect(await slot.text()).toContain('Artist: artist1') | ||
expect(await slot.text()).toContain('Album: Select an album') | ||
expect(await slot.text()).toContain('Track: Select a track') | ||
|
||
await browser.elementByCss("[href='/artist1/album2']").click() | ||
|
||
await retry(async () => { | ||
// verify page is rendering the params | ||
expect(await browser.elementByCss('h2').text()).toBe('Album: album2') | ||
}) | ||
|
||
// verify slot is rendering the params | ||
expect(await slot.text()).toContain('Artist: artist1') | ||
expect(await slot.text()).toContain('Album: album2') | ||
expect(await slot.text()).toContain('Track: Select a track') | ||
|
||
await browser.elementByCss("[href='/artist1/album2/track3']").click() | ||
|
||
await retry(async () => { | ||
// verify page is rendering the params | ||
expect(await browser.elementByCss('h2').text()).toBe('Track: track3') | ||
}) | ||
|
||
// verify slot is rendering the params | ||
expect(await slot.text()).toContain('Artist: artist1') | ||
expect(await slot.text()).toContain('Album: album2') | ||
expect(await slot.text()).toContain('Track: track3') | ||
}) | ||
}) |