Next.js 13.0.5 Pages目录下router.push仅改URL不跳转问题求助

针对你遇到的router.push有时仅改URL不跳转的问题，结合Pages目录的特性，给出几个实用的排查和解决方向：

• 确保路由调用时机正确
  避免在组件初始化阶段（比如函数组件顶层）直接调用router.push，这时候组件可能还未完成挂载，路由实例状态不稳定。可以放在useEffect中，依赖相关变量触发：

  import { useRouter, useEffect } from "next/router";
  
  function PostCard({ post }) {
    const router = useRouter();
  
    useEffect(() => {
      if (post?.slug) {
        router.push(`/blog/${post.slug}`);
      }
    }, [post?.slug, router]);
  
    return <div>...</div>;
  }
  

• 强制绕过客户端路由缓存
  Next.js的客户端路由会缓存页面，偶尔会导致跳转不触发页面更新。可以通过forceRefresh参数强制刷新，或者用replace替代push避免历史记录干扰：

  // 强制刷新页面
  router.push(`/blog/${post.slug}`, undefined, { forceRefresh: true });
  
  // 或者用replace替换当前路由
  router.replace(`/blog/${post.slug}`);
  

• 检查事件处理中的默认行为冲突
  如果router.push是在点击事件（比如a标签、表单提交）中调用，一定要阻止原生默认行为，避免和Next.js路由逻辑冲突：

  const handleNavigate = (e) => {
    e.preventDefault(); // 阻止a标签的默认跳转
    router.push(`/blog/${post.slug}`);
  };
  
  <a href="#" onClick={handleNavigate}>查看文章详情</a>
  

• 校验目标路由的有效性
  先确认post.slug的值是否合法（非空、格式正确），无效的路径会导致Next.js无法匹配到对应页面，仅修改URL但不加载内容：

  if (post?.slug && typeof post.slug === 'string') {
    router.push(`/blog/${post.slug}`);
  } else {
    console.error('无效的文章slug:', post?.slug);
  }
  

• 升级Next.js版本
  Next.js 13.0.5属于13.x的早期版本，Pages目录存在不少路由相关的已知bug。建议升级到同大版本的稳定分支（比如13.4.x及以上），很多这类偶发问题已经被官方修复。

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