-
Notifications
You must be signed in to change notification settings - Fork 26.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
App Router: fix relative query/hash handling in
next/link
and route…
…r 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: 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 #42157 & #44139, and potentially #48554 and #22838 ## Test Plan ``` pnpm testheadless test/e2e/app-dir/navigation ``` ---------
- Loading branch information
Showing
5 changed files
with
108 additions
and
2 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
20 changes: 20 additions & 0 deletions
20
test/e2e/app-dir/navigation/app/nested-relative-query-and-hash/client-component.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,20 @@ | ||
'use client' | ||
|
||
import { useRouter } from 'next/navigation' | ||
|
||
export function RouterPushButton() { | ||
const router = useRouter() | ||
|
||
return ( | ||
<h3 id="h3"> | ||
<button | ||
id="button-to-h3-hash-only" | ||
onClick={() => { | ||
router.push('#h3') | ||
}} | ||
> | ||
To #h3, hash only | ||
</button> | ||
</h3> | ||
) | ||
} |
28 changes: 28 additions & 0 deletions
28
test/e2e/app-dir/navigation/app/nested-relative-query-and-hash/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,28 @@ | ||
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 /> | ||
</> | ||
) | ||
} |
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