No description
Find a file
Keyan Zhang 8e202610a4
App Router: fix relative query/hash handling in next/link and router push/replace (#49521)
## Problem
Relative hash/query handling in `next/link` (e.g. `<Link
href="#hello">`) is broken in App Router, especially if you're on a
nested route.

This wasn't a problem in `/pages` because the href always get fully
resolved in `<NextLink>`; i.e. if you have `<Link href="#hash" />` on
`/hello`, it'll resolve the href to `/hello#hash` and use that
everywhere.

However, in App Router, `<Link>` no longer uses the current location to
resolve the href:
5451564f36/packages/next/src/client/link.tsx (L450-L457)

Therefore navigating with `new URL(href, location.origin)` will skip the
current path and always apply the relative hash/query to the _root_
route:
5451564f36/packages/next/src/client/components/app-router.tsx (L208-L215)

## Solution
Not 100% sure if this is the best solution, but since `app-router` is
already reading `window.location`, I'm using `location.href` as the base
URL to resolve the href.

I grep'd for `location.origin` and checked other callsites; seems like
only `app-router` deals with user specified hrefs.

Fixes https://github.com/vercel/next.js/issues/42157 &
https://github.com/vercel/next.js/issues/44139, and potentially
https://github.com/vercel/next.js/issues/48554 and
https://github.com/vercel/next.js/issues/22838

## Test Plan
```
pnpm testheadless test/e2e/app-dir/navigation
```

---------
2023-05-28 10:29:00 -07:00
.cargo build(cargo): move workspaces manifest to top level (#48198) 2023-04-19 18:38:36 +02:00
.config build(cargo): move workspaces manifest to top level (#48198) 2023-04-19 18:38:36 +02:00
.devcontainer re-enable next-dev-tests (#47087) 2023-03-14 16:05:19 +01:00
.github Update env in new workflow 2023-05-27 23:29:08 -07:00
.husky Replace pre-commit with husky (#38350) 2022-07-06 11:14:16 -05:00
.vscode Optimize trace span relationships (#49697) 2023-05-12 13:01:07 +02:00
bench Replace var with const (#49379) 2023-05-09 10:25:39 +02:00
contributing update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
docs Remove static analysis of process.env (#50260) 2023-05-24 08:19:02 -07:00
errors Update invalid-new-link-with-extra-anchor.md (#50036) 2023-05-21 21:31:39 +00:00
examples Update Vanilla Extract Example (#50394) 2023-05-27 01:41:17 +00:00
packages App Router: fix relative query/hash handling in next/link and router push/replace (#49521) 2023-05-28 10:29:00 -07:00
scripts Update workflow cancel handling (#50442) 2023-05-27 22:57:45 -07:00
test App Router: fix relative query/hash handling in next/link and router push/replace (#49521) 2023-05-28 10:29:00 -07:00
.alexignore Integrate next-* crates from Turbopack (#47019) 2023-03-13 14:33:17 +01:00
.alexrc docs: Add "special" to the Alex allowlist (#48021) 2023-04-06 16:32:06 +02:00
.eslintignore chore: Add .vscode to eslintignore (#48020) 2023-04-07 15:51:26 +00:00
.eslintrc.json Update MetadataRoute to namespace (#47674) 2023-03-30 15:27:44 -07:00
.gitattributes the way towards webpack 5 typings (#29105) 2021-09-21 19:17:16 +02:00
.gitignore Remove unused code from test-pack turbo task (#48487) 2023-04-18 12:12:00 +00:00
.npmrc fix: npm publish provenance permissions (#48757) 2023-04-24 14:08:55 +00:00
.prettierignore refactor webpack loaders (#49535) 2023-05-23 17:21:25 +02:00
.prettierignore_staged hmr error improvements (#30616) 2023-01-06 20:35:16 +01:00
.prettierrc.json Prettier trailingComma default value to es5 since 2.0 (#14391) 2020-06-22 13:25:24 +02:00
.rustfmt.toml build(cargo): move workspaces manifest to top level (#48198) 2023-04-19 18:38:36 +02:00
azure-pipelines.yml Update min Node.js version to v16 (#48903) 2023-04-27 07:31:27 +00:00
Cargo.lock Refactor internal modules (#50338) 2023-05-27 08:22:15 +02:00
Cargo.toml Refactor internal modules (#50338) 2023-05-27 08:22:15 +02:00
CODE_OF_CONDUCT.md updated code of conduct to v2.1 (#34208) 2022-02-10 18:11:42 -06:00
contributing.md chore: improve repo templates (#46629) 2023-03-01 09:25:51 -08:00
jest.config.js Refactor and add more tests to next/font/local (#46627) 2023-03-01 15:31:45 -08:00
jest.replay.config.js Add Replay integration for dev e2e tests (#40955) 2022-09-29 14:45:10 -07:00
lerna.json v13.4.5-canary.0 2023-05-26 10:36:33 +00:00
license.md Update license year (#44403) 2023-01-01 11:12:49 +01:00
lint-staged.config.js Run dev tests against default CNA templates (#45211) 2023-01-24 11:01:03 -08:00
package.json Add new build and test workflow (#50436) 2023-05-27 21:02:31 -07:00
plopfile.js Opt-in to dynamic rendering when reading searchParams (#46205) 2023-03-16 21:46:35 +01:00
pnpm-lock.yaml Add new build and test workflow (#50436) 2023-05-27 21:02:31 -07:00
pnpm-workspace.yaml Integrate next-* crates from Turbopack (#47019) 2023-03-13 14:33:17 +01:00
readme.md Monorepo (#5341) 2018-10-01 01:02:10 +02:00
release.js Fix labels for release sections 2021-11-21 13:11:54 +01:00
run-tests.js Add new build and test workflow (#50436) 2023-05-27 21:02:31 -07:00
rust-toolchain build(cargo): move workspaces manifest to top level (#48198) 2023-04-19 18:38:36 +02:00
test-file.txt Add additional file serving tests (#12479) 2020-05-04 11:58:19 -05:00
tsconfig-tsec.json Integrate tsec into the linting process (#33746) 2022-02-24 16:59:18 -08:00
tsconfig.json Integrate next-* crates from Turbopack (#47019) 2023-03-13 14:33:17 +01:00
tsec-exemptions.json Move core files to src folder and move JS files to TypeScript (#44405) 2023-01-03 10:05:50 +01:00
turbo.json Add new build and test workflow (#50436) 2023-05-27 21:02:31 -07:00
UPGRADING.md Move upgrading guide to /docs (#10727) 2020-02-28 23:46:18 +01:00
vercel.json Silence GH Comments for Preview URLs (#18766) 2020-11-03 21:59:47 +00:00

Next.js

Getting Started

Visit https://nextjs.org/learn to get started with Next.js.

Documentation

Visit https://nextjs.org/docs to view the full documentation.

Who is using Next.js?

Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.

Community

The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the Next.js Discord.

Our Code of Conduct applies to all Next.js community channels.

Contributing

Please see our contributing.md.

Good First Issues

We have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Authors

Security

If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.

https://vercel.com/security