forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Full page reload when navigating to new root layout (vercel#40751)
Finds the root layout segments for flight requests. If those segments doesn't match the FlightRouterState it's a new root layout and a full page reload is required. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] 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) Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
- Loading branch information
Showing
18 changed files
with
358 additions
and
5 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
import path from 'path' | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import webdriver from 'next-webdriver' | ||
|
||
describe('app-dir mpa navigation', () => { | ||
if ((global as any).isNextDeploy) { | ||
it('should skip next deploy for now', () => {}) | ||
return | ||
} | ||
|
||
if (process.env.NEXT_TEST_REACT_VERSION === '^17') { | ||
it('should skip for react v17', () => {}) | ||
return | ||
} | ||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files: { | ||
app: new FileRef(path.join(__dirname, 'mpa-navigation/app')), | ||
'next.config.js': new FileRef( | ||
path.join(__dirname, 'mpa-navigation/next.config.js') | ||
), | ||
}, | ||
dependencies: { | ||
react: 'experimental', | ||
'react-dom': 'experimental', | ||
}, | ||
}) | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
describe('Should do a mpa navigation when switching root layout', () => { | ||
it('should work with basic routes', async () => { | ||
const browser = await webdriver(next.url, '/basic-route') | ||
|
||
expect(await browser.elementById('basic-route').text()).toBe( | ||
'Basic route' | ||
) | ||
await browser.eval('window.__TEST_NO_RELOAD = true') | ||
|
||
// Navigate to page with same root layout | ||
await browser.elementByCss('a').click() | ||
expect( | ||
await browser.waitForElementByCss('#inner-basic-route').text() | ||
).toBe('Inner basic route') | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeTrue() | ||
|
||
// Navigate to page with different root layout | ||
await browser.elementByCss('a').click() | ||
expect(await browser.waitForElementByCss('#route-group').text()).toBe( | ||
'Route group' | ||
) | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeUndefined() | ||
}) | ||
|
||
it('should work with route groups', async () => { | ||
const browser = await webdriver(next.url, '/route-group') | ||
|
||
expect(await browser.elementById('route-group').text()).toBe( | ||
'Route group' | ||
) | ||
await browser.eval('window.__TEST_NO_RELOAD = true') | ||
|
||
// Navigate to page with same root layout | ||
await browser.elementByCss('a').click() | ||
expect( | ||
await browser.waitForElementByCss('#nested-route-group').text() | ||
).toBe('Nested route group') | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeTrue() | ||
|
||
// Navigate to page with different root layout | ||
await browser.elementByCss('a').click() | ||
expect(await browser.waitForElementByCss('#parallel-one').text()).toBe( | ||
'One' | ||
) | ||
expect(await browser.waitForElementByCss('#parallel-two').text()).toBe( | ||
'Two' | ||
) | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeUndefined() | ||
}) | ||
|
||
it('should work with parallel routes', async () => { | ||
const browser = await webdriver(next.url, '/with-parallel-routes') | ||
|
||
expect(await browser.elementById('parallel-one').text()).toBe('One') | ||
expect(await browser.elementById('parallel-two').text()).toBe('Two') | ||
await browser.eval('window.__TEST_NO_RELOAD = true') | ||
|
||
// Navigate to page with same root layout | ||
await browser.elementByCss('a').click() | ||
expect( | ||
await browser.waitForElementByCss('#parallel-one-inner').text() | ||
).toBe('One inner') | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeTrue() | ||
|
||
// Navigate to page with different root layout | ||
await browser.elementByCss('a').click() | ||
expect(await browser.waitForElementByCss('#dynamic-hello').text()).toBe( | ||
'dynamic hello' | ||
) | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeUndefined() | ||
}) | ||
|
||
it('should work with dynamic routes', async () => { | ||
const browser = await webdriver(next.url, '/dynamic/first/route') | ||
|
||
expect(await browser.elementById('dynamic-route').text()).toBe( | ||
'dynamic route' | ||
) | ||
await browser.eval('window.__TEST_NO_RELOAD = true') | ||
|
||
// Navigate to page with same root layout | ||
await browser.elementByCss('a').click() | ||
expect( | ||
await browser.waitForElementByCss('#dynamic-second-hello').text() | ||
).toBe('dynamic hello') | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeTrue() | ||
|
||
// Navigate to page with different root layout | ||
await browser.elementByCss('a').click() | ||
expect( | ||
await browser.waitForElementByCss('#inner-basic-route').text() | ||
).toBe('Inner basic route') | ||
expect(await browser.eval('window.__TEST_NO_RELOAD')).toBeUndefined() | ||
}) | ||
}) | ||
}) |
10 changes: 10 additions & 0 deletions
10
.../app-dir/mpa-navigation/app/(route-group)/(nested-route-group)/nested-route-group/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/with-parallel-routes">To with-parallel-routes</Link> | ||
<p id="nested-route-group">Nested route group</p> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/(route-group)/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,10 @@ | ||
export default function Root({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>Hello</title> | ||
</head> | ||
<body>{children}</body> | ||
</html> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/(route-group)/route-group/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/nested-route-group">To nested route group</Link> | ||
<p id="route-group">Route group</p> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/basic-route/inner/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/route-group">To route group</Link> | ||
<p id="inner-basic-route">Inner basic route</p> | ||
</> | ||
) | ||
} |
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 @@ | ||
export default function Root({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>Hello</title> | ||
</head> | ||
<body>{children}</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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/basic-route/inner">To inner basic route</Link> | ||
<p id="basic-route">Basic route</p> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/dynamic/first/[param]/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page({ params }) { | ||
return ( | ||
<> | ||
<Link href="/dynamic/second/hello">To second dynamic</Link> | ||
<p id={`dynamic-${params.param}`}>dynamic {params.param}</p> | ||
</> | ||
) | ||
} |
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 @@ | ||
export default function Root({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>Hello</title> | ||
</head> | ||
<body>{children}</body> | ||
</html> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/dynamic/second/[param]/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page({ params }) { | ||
return ( | ||
<> | ||
<Link href="/basic-route/inner">To basic inner</Link> | ||
<p id={`dynamic-second-${params.param}`}>dynamic {params.param}</p> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/to-pages-dir/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,10 @@ | ||
export default function Root({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>Hello</title> | ||
</head> | ||
<body>{children}</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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<p id="in-app-dir">In app dir</p> | ||
<Link href="/pages-dir">To pages dir</Link> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/with-parallel-routes/@one/inner/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/dynamic/first/hello">To dynamic route</Link> | ||
<p id="parallel-one-inner">One inner</p> | ||
</> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/mpa-navigation/app/with-parallel-routes/@one/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,10 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<Link href="/with-parallel-routes/inner">To parallel inner</Link> | ||
<p id="parallel-one">One</p> | ||
</> | ||
) | ||
} |
3 changes: 3 additions & 0 deletions
3
test/e2e/app-dir/mpa-navigation/app/with-parallel-routes/@two/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,3 @@ | ||
export default function Page() { | ||
return <p id="parallel-two">Two</p> | ||
} |
Oops, something went wrong.