Next.js router.push跳转目标URL却触发页面重载问题求助

页面结构 #

pages
     [re]
       login
          [slug.tsx]

异常场景 #

直接在浏览器加载 http://localhost:3000/in/login/data1 后，点击按钮调用：

router.push(`in/login/data2`, undefined, { locale });

跳转至 http://localhost:3000/in/login/data2 时触发页面重载，Redux Store 被清空；但从首页通过 <Link href="/in/login/data1"> 进入该页面后操作正常。

可能原因及解决方法 #

1. 相对路径解析触发客户端路由失效 #

你使用相对路径 in/login/data2 作为跳转目标，直接访问页面时，Next.js 路由上下文的基准路径是 /in/login/data1，相对路径会被错误解析为 /in/login/data1/in/login/data2，即便最终路径被重写修正，这个异常解析过程会触发全页刷新；而通过 <Link> 进入时，客户端路由上下文已正确初始化，相对路径解析逻辑正常。

解决方法：将目标路径改为绝对路径：

router.push(`/in/login/data2`, undefined, { locale });

2. locale 参数配置异常 #

第三个参数中的 locale 值可能存在问题：

• 直接访问页面时，SSR 初始化的 locale 状态与客户端不一致，或 locale 为 undefined/无效值，导致 Next.js 无法通过客户端路由完成跳转， fallback 到全页刷新。
• 通过 <Link> 进入时，客户端 locale 状态已同步完成，跳转逻辑正常。

解决方法：

• 确认 locale 有效性，用当前路由的 locale 传入：

  router.push(`/in/login/data2`, undefined, { locale: router.locale });
  

• 如果 [re] 是业务路由参数而非 locale，直接移除 locale 选项：

  router.push(`/in/login/data2`);
  

3. 路由未完全初始化时触发跳转 #

直接访问页面时，客户端路由可能还未完成初始化（router.isReady 为 false），此时调用 router.push 会触发全页刷新；而通过 <Link> 进入时，路由已完成初始化。

解决方法：跳转前确保路由就绪：

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

const LoginPage = () => {
  const router = useRouter();
  const [isRouterReady, setIsRouterReady] = useState(false);

  useEffect(() => {
    if (router.isReady) {
      setIsRouterReady(true);
    }
  }, [router.isReady]);

  const handleJump = () => {
    if (!isRouterReady) return;
    router.push(`/in/login/data2`, undefined, { locale: router.locale });
  };

  return <button onClick={handleJump}>跳转</button>;
};

export default LoginPage;

4. Redux Store 重置的补充说明 #

页面重载会导致 Redux Store 重置是正常行为，但核心问题是触发了重载。若需避免 Store 清空，可配置 redux-persist 实现持久化，但优先解决路由跳转触发重载的问题。

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