调用router.push跳转不存在页面时，Next.js为何会刷新页面？

原因 #

Next.js 的客户端路由（router.push）仅对构建阶段已生成/预渲染的页面路径生效。当跳转的路径不存在时，客户端找不到对应的页面组件，Next.js 会自动回退到浏览器传统的整页刷新机制，让服务器处理这个未匹配的请求（通常返回404）。而跳转已存在页面时，客户端能直接找到对应组件，所以实现无刷新跳转。

解决方案 #

1. 提前校验目标路径

维护一个项目中已存在的页面路径列表，跳转前先做校验，避免跳转到不存在的路径：

// 根据你的项目实际页面路径维护这个数组
const validPagePaths = ['/', '/dashboard', '/profile'];
const targetPath = '/some-not-existing-page';

if (validPagePaths.includes(targetPath)) {
  router.push(targetPath);
} else {
  // 主动跳转到自定义404页面，避免整页刷新
  router.push('/404');
}

2. 自定义404页面

在项目中创建自定义404页面，让不存在的路径统一渲染这个页面，提升用户体验：

• Pages Router：在pages目录下新建404.js

export default function NotFoundPage() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
      <div>
        <h1>404</h1>
        <p>抱歉，你访问的页面不存在</p>
      </div>
    </div>
  );
}

• App Router：在app目录下新建404/page.js

export default function NotFound() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
      <div>
        <h1>404</h1>
        <p>抱歉，你访问的页面不存在</p>
      </div>
    </div>
  );
}

这样不管是直接输入不存在的路径，还是通过router.push跳转，都会渲染这个自定义404页面，且主动跳转到/404时是客户端无刷新跳转。

3. App Router 路由兜底处理

如果使用App Router，可通过兜底路由处理所有未匹配的路径：在app目录下新建[...not-found]/page.js，作为所有未匹配路径的统一处理页面：

export default function CatchAllNotFound() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
      <h1>404 - 页面不存在</h1>
    </div>
  );
}

这种方式无需主动跳转到/404，任何未匹配的路径都会自动渲染该页面，且客户端跳转时可保持无刷新状态。

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