Next.js 14 App Router页面刷新问题：router.refresh()无效求助

1. 解决useRouter导入错误问题 #

App Router 中，useRouter 需从 next/navigation 导入，而非 next/router（后者是 Pages Router 的专属 API），这是你之前导入失败的直接原因：

import { useRouter } from 'next/navigation';

2. router.refresh() 无效的核心原因 #

router.refresh() 的作用是重新拉取服务器组件数据并更新页面，但不会重置客户端本地状态（比如你用 useState 控制的模态框显示状态）。如果你的模态框是靠客户端状态控制显示/隐藏，调用 refresh() 不会改变这个状态，自然无法关闭模态框。

3. 标准实现方案 #

方案一：直接控制客户端状态（推荐）

这是最优解，无需刷新页面，用户体验更流畅：

'use client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function Home() {
  // 用客户端状态控制模态框显示
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(true);
  const router = useRouter();

  const apiCallHandler = async () => {
    const res = await fetch('/api/login', { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ /* 登录参数 */ })
    });
    const data = await res.json();

    if (data.success) {
      await asyncFn();
      // 直接关闭模态框
      setIsLoginModalOpen(false);
      // 如果需要同步服务器端数据（比如用户信息），再调用refresh
      router.refresh();
    }
  };

  return (
    <>
      {isLoginModalOpen && (
        <div className="login-modal">
          {/* 登录表单内容 */}
          <button onClick={apiCallHandler}>提交登录</button>
        </div>
      )}
    </>
  );
}

方案二：强制页面刷新（仅必要时使用）

如果业务逻辑必须依赖全页面刷新（比如某些服务器端渲染的状态无法通过 refresh() 同步），App Router 没有内置的 reload() 方法，你可以：

• 继续使用 window.location.reload()，这是浏览器原生方法，在客户端组件中完全可行；
• 或者通过路由跳转模拟刷新：

if (data.success) {
  await asyncFn();
  // 跳转到当前页面并刷新服务器数据
  router.push(window.location.pathname);
  router.refresh();
}

但注意这种方式同样不会重置客户端状态，所以还是方案一更适合关闭模态框的场景。

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