这个问题我之前做项目的时候正好碰到过，核心原因是你用的router.push()默认会向浏览器历史栈新增一条记录——所以你从首页跳过来后，页面自动更新参数时又加了一条历史，点击返回按钮自然只会退到这条新记录，而不是回到首页。要实现「更新参数但不新增历史」的需求，换个API就能解决！

核心解决方案：用router.replace()替代router.push() #

router.replace()的作用是替换当前的历史记录条目，而不是新增。这样更新参数后，浏览器历史栈里还是原来的那一条跳转记录，点击返回就会直接回到上一页了。

基础代码示例 #

const router = useRouter();
// 把push换成replace
router.replace({
  query: {
    page: 1,
    limit: 50
  }
});

优化：避免重复触发 #

为了防止组件重新渲染时重复执行参数更新逻辑，建议把这段代码放在useEffect里，同时加个参数校验，确保只在需要的时候执行：

import { useRouter, useEffect } from 'next/router';

function TargetPage() {
  const router = useRouter();

  useEffect(() => {
    // 检查当前参数是否符合预期，不符合才更新
    if (router.query.page !== '1' || router.query.limit !== '50') {
      router.replace({
        query: {
          ...router.query, // 保留其他可能存在的查询参数
          page: 1,
          limit: 50
        }
      });
    }
  }, [router]);

  // 页面其他逻辑...
  return <div>你的页面内容</div>;
}

export default TargetPage;

原理说明 #

当你从首页跳转到目标页面时，浏览器历史栈里会生成一条该页面的初始记录（不带参数或带默认参数）。用router.replace()更新参数后，这条初始记录会被替换成带?page=1&limit=50的版本，历史栈的总条数并没有增加。此时点击返回按钮，就会直接回到首页的历史记录，完全符合你的预期。

额外优化方案（SSR场景） #

如果你的页面是服务端渲染（SSR），可以直接在getServerSideProps里提前处理参数重定向，这样客户端渲染时就不需要再做操作，从根源避免历史记录问题：

export async function getServerSideProps(context) {
  const { query } = context;
  // 如果当前参数不符合要求，直接重定向到目标地址
  if (query.page !== '1' || query.limit !== '50') {
    return {
      redirect: {
        destination: '/target-page?page=1&limit=50',
        permanent: false
      }
    };
  }
  return { props: {} };
}

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