Next.js 13中如何在router.replace中使用shallow: true选项？

情况1：使用App Router（app目录） #

App Router 中next/navigation提供的useRouter没有直接的shallow参数，但可以通过以下方式模拟浅更新效果：

• 局部更新URL搜索参数
  若仅需修改URL查询参数且不需要重新渲染页面组件，可复制当前搜索参数并修改后调用router.replace，这种方式不会触发页面组件的重新挂载，仅会因useSearchParams变化触发组件轻量重渲染，和Pages Router的shallow: true效果接近。

  示例代码：

  'use client';
  import { useRouter, useSearchParams } from 'next/navigation';
  
  function UpdateParams() {
    const router = useRouter();
    const searchParams = useSearchParams();
  
    const handleShallowReplace = () => {
      const newParams = new URLSearchParams(searchParams);
      newParams.set('page', '2');
      router.replace(`?${newParams.toString()}`, { scroll: false });
    };
  
    return <button onClick={handleShallowReplace}>更新页码（浅更新）</button>;
  }
  
  export default UpdateParams;
  

• 结合路径名与本地状态管理
  若要完全避免组件重渲染，可通过usePathname和本地状态手动同步URL变化，不依赖路由参数的自动监听。

  示例代码：

  'use client';
  import { useRouter, usePathname } from 'next/navigation';
  import { useState, useEffect } from 'react';
  
  function ShallowUpdate() {
    const router = useRouter();
    const pathname = usePathname();
    const [localPage, setLocalPage] = useState('1');
  
    useEffect(() => {
      const params = new URLSearchParams(window.location.search);
      setLocalPage(params.get('page') || '1');
    }, []);
  
    const handleShallowReplace = () => {
      const newPage = parseInt(localPage) + 1;
      setLocalPage(newPage.toString());
      router.replace(`${pathname}?page=${newPage}`, { scroll: false });
    };
  
    return (
      <div>
        <p>当前页码：{localPage}</p>
        <button onClick={handleShallowReplace}>下一页（浅更新）</button>
      </div>
    );
  }
  
  export default ShallowUpdate;
  

情况2：使用Pages Router（pages目录） #

若项目仍基于Pages Router，直接在router.replace中传入shallow: true参数即可实现需求：

import { useRouter } from 'next/router';

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

  const handleShallowReplace = () => {
    router.replace('/posts?page=2', undefined, { shallow: true });
  };

  return <button onClick={handleShallowReplace}>浅更新路由</button>;
}

export default MyComponent;

关键说明 #

App Router 没有官方的shallow选项，因其路由模型基于React Server Components，默认行为与Pages Router不同。上述模拟方式的核心是仅更新URL，避免触发页面服务器端渲染或组件重新挂载，与shallow: true的核心目标一致。

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