Next.js中如何正确处理登录后的页面跳转？

百里立顺提问于 2026-03-08 13:33:20 阅读 14

框架

我在用Next.js做用户登录，调用API成功后想跳转到首页，但用router.push没反应，页面卡在登录页不动。

我试过在useEffect里判断isAuthenticated然后跳转，也试过直接在登录回调里跳，都不行。控制台也没报错，就是不跳转。这是我的登录提交代码：

const handleLogin = async (e) => {
  e.preventDefault();
  const res = await fetch('/api/auth/login', { method: 'POST', body: JSON.stringify(credentials) });
  if (res.ok) {
    router.push('/'); // 这里完全没反应
  }
};

React框架

我来解答赞 1 收藏

反馈

2 条解答

南宫楚萓 Lv1

Next.js的router.push在页面跳转前需要先检查router是否ready。试试这么改：

const handleLogin = async (e) => {

  e.preventDefault();

  const res = await fetch('/api/auth/login', { method: 'POST', body: JSON.stringify(credentials) });

  if (res.ok) {

    if (router.isReady) {

      router.push('/');

    } else {

      router.replace('/');

    }

  }

};

要么加个isReady判断，要么直接用replace。这破问题坑过不少人。

2026-03-09 13:05

UX-红会 Lv1

哈哈这个坑我踩过，半夜调试到崩溃！问题出在Next.js的路由机制上。router.push不是没执行，而是被Next.js的预渲染给干扰了。

简单说，直接调用router.push是不够的，我后来发现得加个replace: true参数。改成这样：

router.push('/', { replace: true });

原因是我们登录后通常不希望用户能通过浏览器后退按钮回到登录页，用replace会替换掉历史记录而不是添加新记录。另外建议在跳转前加个await确保万无一失：

await router.push('/', { replace: true });

还有个常见坑是没处理router对象未初始化的情况。建议在组件顶部这样获取router：
const router = useRouter();

别走弯路了老弟，我当初在这卡了整整一天，最后发现就是个参数的问题...

2026-03-08 14:04