Next.js中router.push设置scroll: false仍自动滚动问题求助

你在使用App Router的useRouter做shallow路由更新时，设置了scroll: false但页面还是会滚到顶部，这是因为App Router里shallow路由更新的scroll配置存在特殊行为，初始渲染的滚动逻辑可能会覆盖你的设置。下面给两个可行的解决办法：

方案一：手动记录并恢复滚动位置 #

执行路由更新前先记下当前滚动位置，更新完成后再把页面滚回去，这种方式直接控制浏览器滚动行为，比依赖框架配置更可靠：

"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

const MyComponent = ({ pageNumber }) => {
    const router = useRouter();

    useEffect(() => {
        if (!pageNumber || pageNumber === null || pageNumber === "") {
            // 记录当前滚动高度
            const currentScroll = window.scrollY;
            // 执行路由更新
            router.push(`?pageNumber=1`, undefined, { shallow: true });
            // 下一帧恢复滚动位置
            requestAnimationFrame(() => {
                window.scrollTo(0, currentScroll);
            });
        }
    }, [pageNumber, router]);
};

export default MyComponent;

注意把pageNumber和router加入useEffect的依赖数组，避免闭包问题或者不必要的重复执行。

方案二：先检查现有参数再更新 #

结合useSearchParams先判断URL里有没有目标参数，避免无意义的路由更新，同时配合手动恢复滚动：

"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useEffect } from "react";

const MyComponent = ({ pageNumber }) => {
    const router = useRouter();
    const searchParams = useSearchParams();

    useEffect(() => {
        const existingPage = searchParams.get("pageNumber");
        // 只有当props里的pageNumber为空，且URL里也没有pageNumber参数时才执行更新
        if (!pageNumber && (!existingPage || existingPage === "")) {
            const currentScroll = window.scrollY;
            router.push(`?pageNumber=1`, undefined, { shallow: true });
            requestAnimationFrame(() => window.scrollTo(0, currentScroll));
        }
    }, [pageNumber, searchParams, router]);
};

export default MyComponent;

为什么原来的scroll: false不生效？ #

在App Router的shallow路由更新场景下，框架内部的初始滚动处理逻辑可能会忽略scroll: false配置，尤其是在组件首次渲染时执行路由更新的情况。手动控制滚动位置可以绕过这个问题，直接达到你想要的效果。

内容的提问来源于stack exchange，提问作者Giorgos Karras