mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Keyan ZhangandGitHub
8e202610a4
## 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: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/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: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/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 ``` ---------
29 lines
593 B
JavaScript
29 lines
593 B
JavaScript
import Link from 'next/link'
|
|
import { RouterPushButton } from './client-component'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<h1 id="h1">
|
|
<Link href="#h1" id="link-to-h1-hash-only">
|
|
To #h1, hash only
|
|
</Link>
|
|
</h1>
|
|
|
|
<p>
|
|
<Link href="?foo=1&bar=2" id="link-to-dummy-query">
|
|
Query only
|
|
</Link>
|
|
</p>
|
|
|
|
<h2 id="h2">
|
|
<Link href="?here=ok#h2" id="link-to-h2-with-hash-and-query">
|
|
To #h2, with both relative hash and query
|
|
</Link>
|
|
</h2>
|
|
|
|
<RouterPushButton />
|
|
</>
|
|
)
|
|
}
|