fix(router): allow relative navigation from index pages #33084

balazsorban44 · 2022-01-07T15:13:13Z

It looks like navigating from an index.js with a relative href does not work.

All of these should be supported:

/nav/relative to ./relative-1 should render /nav/relative/relative-1 (doesn't work currently)
/nav/relative/relative-1 to ./relative-2 should render /nav/relative/relative-2 (works)
/nav/relative/relative-2 to . should render /nav/relative (works)

Using both router and Link in tests.

I also noticed that a page that uses a Link and a relative path in href ends up with a hydration mismatch (not just on index pages.)

Bug

Related issues linked using fixes #number
Integration tests added
Errors have 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 helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

ijjk · 2022-01-07T15:29:52Z

Failing test suites

Commit: 71fd162

test/integration/client-navigation/test/index.test.js

Client Navigation > should navigate to paths relative to the current page

Expand output

● Client Navigation › should navigate to paths relative to the current page

expect(received).toMatch(expected)

Expected substring: "On relative 1"
Received string:    "404
This page could not be found."

  958 |         .click()
  959 |         .waitForElementByCss('.nav-home')
> 960 |
      | ^
  961 |       stackLength = await browser.eval('window.history.length')
  962 |
  963 |       expect(stackLength).toBe(3)

  at Object.<anonymous> (integration/client-navigation/test/index.test.js:960:22)

ijjk · 2022-01-07T15:34:22Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
buildDuration	14.7s	14.8s	⚠️ +37ms
buildDurationCached	3.3s	3.3s	⚠️ +27ms
nodeModulesSize	348 MB	348 MB	⚠️ +9 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.011	2.989	-0.02
/ avg req/sec	830.26	836.51	+6.25
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.382	1.406	⚠️ +0.02
/error-in-render avg req/sec	1808.76	1777.52	⚠️ -31.24

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.1 kB	27.1 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.9 kB	70.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.74 kB	4.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.13 kB	2.13 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
buildDuration	16.1s	16.3s	⚠️ +137ms
buildDurationCached	3.3s	2.9s	-351ms
nodeModulesSize	348 MB	348 MB	⚠️ +9 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.964	3.001	⚠️ +0.04
/ avg req/sec	843.44	832.92	⚠️ -10.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.371	1.409	⚠️ +0.04
/error-in-render avg req/sec	1824.12	1774.38	⚠️ -49.74

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.1 kB	71.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	906 B	906 B	✓
image-HASH.js gzip	4.76 kB	4.76 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/relative-navigation-index	Change
index.html gzip	531 B	531 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: 71fd162

SukkaW · 2022-05-11T03:41:34Z

The PR should be superseded by #36823

## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` Fixes #36823 Closes #33084 The issue is caused by the `isLocalURL` function only checks if a URL starts with `/`, `#` or `?`. So a URL that starts with `.` will not be considered a "local URL". The PR fixes that by introducing a new util function `isAbsoluteUrl` that is fully compliant with [RFC3986](https://tools.ietf.org/html/rfc3986#section-4.3).

test(router): add relative navigation tests

71fd162

balazsorban44 requested review from huozhi, ijjk, shuding and timneutkens as code owners January 7, 2022 15:13

balazsorban44 marked this pull request as draft January 7, 2022 15:13

balazsorban44 changed the title ~~fix(router): allow relative navigation to index pages~~ fix(router): allow relative navigation from index pages Jan 7, 2022

SukkaW mentioned this pull request May 11, 2022

fix(#33081): handle relative path correctly #36823

Merged

3 tasks

kodiakhq bot closed this in #36823 May 22, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 22, 2022

balazsorban44 deleted the fix/relative-navigation-index branch October 1, 2022 04:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(router): allow relative navigation from index pages #33084

fix(router): allow relative navigation from index pages #33084

balazsorban44 commented Jan 7, 2022

ijjk commented Jan 7, 2022

ijjk commented Jan 7, 2022

SukkaW commented May 11, 2022

fix(router): allow relative navigation from index pages #33084

fix(router): allow relative navigation from index pages #33084

Conversation

balazsorban44 commented Jan 7, 2022

Bug

Feature

Documentation / Examples

ijjk commented Jan 7, 2022

Failing test suites

ijjk commented Jan 7, 2022

Stats from current PR

SukkaW commented May 11, 2022