mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
5d06b79e92
### What
Support `scroll={false}` for Link component in app router. This can be
used when you don't need to scroll back to top again when route url
changes. For instance hash query changes, if you want to keep the
scrolling as it is, you can use this option.
### How
Handling the `scroll` option in navigation reducer on client side.
Fixes #50105
Fixes NEXT-1377
---------
Co-authored-by: Jiachi Liu <[email protected]>
76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
const HashChanges = () => {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<div id="hash-changes-page">
|
|
<div>
|
|
<Link href="#via-link" id="via-link">
|
|
Via Link
|
|
</Link>
|
|
</div>
|
|
<div>
|
|
<a href="#via-a" id="via-a">
|
|
Via A
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<Link href="#" id="via-empty-hash">
|
|
Via Empty Hash
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="#item-400" id="scroll-to-item-400">
|
|
Go to item 400
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="#name-item-400" id="scroll-to-name-item-400">
|
|
Go to name item 400
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<Link
|
|
href="#name-item-400"
|
|
scroll={false}
|
|
id="scroll-to-name-item-400-no-scroll"
|
|
>
|
|
Go to name item 400 (no scroll)
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="#中文" id="scroll-to-cjk-anchor">
|
|
Go to CJK anchor
|
|
</Link>
|
|
</div>
|
|
|
|
<div>
|
|
<Link href="#top" id="via-top-hash">
|
|
Via Top Hash
|
|
</Link>
|
|
</div>
|
|
<div id="asPath">ASPATH: {router.asPath}</div>
|
|
<div id="pathname">PATHNAME: {router.pathname}</div>
|
|
<div id="中文">CJK anchor</div>
|
|
{Array.from({ length: 500 }, (x, i) => i + 1).map((i) => {
|
|
return (
|
|
<div key={`item-${i}`} name={`name-item-${i}`}>
|
|
{i}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HashChanges
|