Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix prefetch for new router (#41119)
- Add a failing test for navigating between many levels of dynamic routes - Create router tree during prefetch action so that it can be reused across multiple urls - Ensure segmentPath is correct when rendering a subtree. Previously it would generate a segmentPath that starts at the level it renders at which causes the layout-router fetchServerResponse to inject `refetch` at the wrong level. - Fixed a case where Segment was compared using `===` which is no longer valid as dynamic parameters are expressed as arrays. Used `matchSegment` helper instead. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
- Loading branch information
1 parent
5f2e44d
commit 81b8185
Showing
14 changed files
with
307 additions
and
82 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
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
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
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
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,28 @@ | ||
| 'client' | ||
|
|
||
| import { TabNavItem } from './TabNavItem' | ||
| import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client' | ||
|
|
||
| const CategoryNav = ({ categories }) => { | ||
| const selectedLayoutSegment = useSelectedLayoutSegment() | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex' }}> | ||
| <TabNavItem href="/nested-navigation" isActive={!selectedLayoutSegment}> | ||
| Home | ||
| </TabNavItem> | ||
|
|
||
| {categories.map((item) => ( | ||
| <TabNavItem | ||
| key={item.slug} | ||
| href={`/nested-navigation/${item.slug}`} | ||
| isActive={item.slug === selectedLayoutSegment} | ||
| > | ||
| {item.name} | ||
| </TabNavItem> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default CategoryNav |
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,9 @@ | ||
| import Link from 'next/link' | ||
|
|
||
| export const TabNavItem = ({ children, href }) => { | ||
| return ( | ||
| <Link href={href}> | ||
| <a style={{ margin: '10px', display: 'block' }}>{children}</a> | ||
| </Link> | ||
| ) | ||
| } |
31 changes: 31 additions & 0 deletions
31
test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js
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,31 @@ | ||
| 'client' | ||
|
|
||
| import { TabNavItem } from '../TabNavItem' | ||
| import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client' | ||
|
|
||
| const SubCategoryNav = ({ category }) => { | ||
| const selectedLayoutSegment = useSelectedLayoutSegment() | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex' }}> | ||
| <TabNavItem | ||
| href={`/nested-navigation/${category.slug}`} | ||
| isActive={!selectedLayoutSegment} | ||
| > | ||
| All | ||
| </TabNavItem> | ||
|
|
||
| {category.items.map((item) => ( | ||
| <TabNavItem | ||
| key={item.slug} | ||
| href={`/nested-navigation/${category.slug}/${item.slug}`} | ||
| isActive={item.slug === selectedLayoutSegment} | ||
| > | ||
| {item.name} | ||
| </TabNavItem> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SubCategoryNav |
11 changes: 11 additions & 0 deletions
11
test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/[subCategorySlug]/page.js
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,11 @@ | ||
| import { experimental_use as use } from 'react' | ||
| import { fetchSubCategory } from '../../getCategories' | ||
|
|
||
| export default function Page({ params }) { | ||
| const category = use( | ||
| fetchSubCategory(params.categorySlug, params.subCategorySlug) | ||
| ) | ||
| if (!category) return null | ||
|
|
||
| return <h1 id={category.name.toLowerCase()}>{category.name}</h1> | ||
| } |
14 changes: 14 additions & 0 deletions
14
test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/layout.js
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,14 @@ | ||
| import { experimental_use as use } from 'react' | ||
| import { fetchCategoryBySlug } from '../getCategories' | ||
| import SubCategoryNav from './SubCategoryNav' | ||
|
|
||
| export default function Layout({ children, params }) { | ||
| const category = use(fetchCategoryBySlug(params.categorySlug)) | ||
| if (!category) return null | ||
| return ( | ||
| <> | ||
| <SubCategoryNav category={category} /> | ||
| {children} | ||
| </> | ||
| ) | ||
| } |
9 changes: 9 additions & 0 deletions
9
test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/page.js
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,9 @@ | ||
| import { experimental_use as use } from 'react' | ||
| import { fetchCategoryBySlug } from '../getCategories' | ||
|
|
||
| export default function Page({ params }) { | ||
| const category = use(fetchCategoryBySlug(params.categorySlug)) | ||
| if (!category) return null | ||
|
|
||
| return <h1 id={`all-${category.name.toLowerCase()}`}>All {category.name}</h1> | ||
| } |
Oops, something went wrong.