Support scroll: false for Link component for app router

packages/next/src/client/components/app-router.tsx

@@ -223,11 +223,7 @@ function Router({
   )
 
   const navigate: RouterNavigate = useCallback(
-    (
-      href: string,
-      navigateType: 'push' | 'replace',
-      forceOptimisticNavigation: boolean
-    ) => {
+    (href, navigateType, forceOptimisticNavigation, shouldScroll) => {
       const url = new URL(addBasePath(href), location.href)
 
       return dispatch({
@@ -236,6 +232,7 @@ function Router({
         isExternalUrl: isExternalURL(url),
         locationSearch: location.search,
         forceOptimisticNavigation,
+        shouldScroll,
         navigateType,
         cache: {
           status: CacheStates.LAZY_INITIALIZED,
@@ -292,16 +289,26 @@ function Router({
           })
         })
       },
-      replace: (href, options = {}) => {
+      replace: (href, options = { scroll: true }) => {
         // @ts-ignore startTransition exists
         React.startTransition(() => {
-          navigate(href, 'replace', Boolean(options.forceOptimisticNavigation))
+          navigate(
+            href,
+            'replace',
+            Boolean(options.forceOptimisticNavigation),
+            options.scroll
+          )
         })
       },
-      push: (href, options = {}) => {
+      push: (href, options = { scroll: true }) => {
         // @ts-ignore startTransition exists
         React.startTransition(() => {
-          navigate(href, 'push', Boolean(options.forceOptimisticNavigation))
+          navigate(
+            href,
+            'push',
+            Boolean(options.forceOptimisticNavigation),
+            options.scroll
+          )
         })
       },
       refresh: () => {

packages/next/src/client/components/router-reducer/handle-mutable.ts

@@ -30,19 +30,25 @@ export function handleMutable(
     },
     // All navigation requires scroll and focus management to trigger.
     focusAndScrollRef: {
-      apply:
-        mutable?.scrollableSegments !== undefined
+      apply: mutable.shouldScroll
+        ? mutable?.scrollableSegments !== undefined
           ? true
-          : state.focusAndScrollRef.apply,
-      hashFragment:
-        // Empty hash should trigger default behavior of scrolling layout into view.
-        // #top is handled in layout-router.
-        mutable.hashFragment && mutable.hashFragment !== ''
+          : state.focusAndScrollRef.apply
+        : // If shouldScroll is false then we should not apply scroll and focus management.
+          false,
+      hashFragment: mutable.shouldScroll
+        ? // Empty hash should trigger default behavior of scrolling layout into view.
+          // #top is handled in layout-router.
+          mutable.hashFragment && mutable.hashFragment !== ''
           ? // Remove leading # and decode hash to make non-latin hashes work.
             decodeURIComponent(mutable.hashFragment.slice(1))
-          : state.focusAndScrollRef.hashFragment,
-      segmentPaths:
-        mutable?.scrollableSegments ?? state.focusAndScrollRef.segmentPaths,
+          : state.focusAndScrollRef.hashFragment
+        : // If shouldScroll is false then we should not apply scroll and focus management.
+          null,
+      segmentPaths: mutable.shouldScroll
+        ? mutable?.scrollableSegments ?? state.focusAndScrollRef.segmentPaths
+        : // If shouldScroll is false then we should not apply scroll and focus management.
+          [],
     },
     // Apply cache.
     cache: mutable.cache ? mutable.cache : state.cache,

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -114,6 +114,7 @@ export function navigateReducer(
     cache,
     mutable,
     forceOptimisticNavigation,
+    shouldScroll,
   } = action
   const { pathname, hash } = url
   const href = createHrefFromUrl(url)
@@ -191,6 +192,7 @@ export function navigateReducer(
       mutable.patchedTree = optimisticTree
       mutable.pendingPush = pendingPush
       mutable.hashFragment = hash
+      mutable.shouldScroll = shouldScroll
       mutable.scrollableSegments = []
       mutable.cache = temporaryCacheNode
       mutable.canonicalUrl = href
@@ -352,12 +354,13 @@ export function navigateReducer(
 
   mutable.previousTree = state.tree
   mutable.patchedTree = currentTree
-  mutable.scrollableSegments = scrollableSegments
   mutable.canonicalUrl = canonicalUrlOverride
     ? createHrefFromUrl(canonicalUrlOverride)
     : href
   mutable.pendingPush = pendingPush
+  mutable.scrollableSegments = scrollableSegments
   mutable.hashFragment = hash
+  mutable.shouldScroll = shouldScroll
 
   return handleMutable(state, mutable)
 }

packages/next/src/client/components/router-reducer/router-reducer-types.ts

@@ -23,7 +23,8 @@ export type RouterChangeByServerResponse = (
 export type RouterNavigate = (
   href: string,
   navigateType: 'push' | 'replace',
-  forceOptimisticNavigation: boolean
+  forceOptimisticNavigation: boolean,
+  shouldScroll: boolean
 ) => void
 
 export interface Mutable {
@@ -36,6 +37,7 @@ export interface Mutable {
   cache?: CacheNode
   prefetchCache?: AppRouterState['prefetchCache']
   hashFragment?: string
+  shouldScroll?: boolean
 }
 
 export interface ServerActionMutable {
@@ -125,6 +127,7 @@ export interface NavigateAction {
   locationSearch: Location['search']
   navigateType: 'push' | 'replace'
   forceOptimisticNavigation: boolean
+  shouldScroll: boolean
   cache: CacheNode
   mutable: Mutable
 }

packages/next/src/shared/lib/app-router-context.ts

@@ -70,6 +70,7 @@ export type CacheNode =
 export interface NavigateOptions {
   /** @internal */
   forceOptimisticNavigation?: boolean
+  scroll: boolean
 }
 
 export interface PrefetchOptions {