Next.js 13中useEffect设成功标志后重定向失效问题

核心问题分析 #

你遇到的重定向失效，主要有两个关键原因：

• 路由API使用错误：Next.js 13的App目录路由体系，客户端组件需要使用next/navigation中的useRouter，而非Pages目录的next/router，后者在App目录下无法正常工作。
• 组件类型未声明：App目录下的组件默认是服务器组件，不能直接调用客户端钩子（如useRouter），必须显式添加"use client";指令标记为客户端组件。

修改后的组件代码 #

"use client"; // 必须添加，标记为客户端组件
import { useRouter } from "next/navigation"; // 修正路由导入路径
import React, { useEffect } from "react";

const MyComponent = ({ success }) => {
  const router = useRouter();
  
  useEffect(() => {
    if (success) {
      setTimeout(() => {
        router.push("/");
      }, 1000);
    }
  }, [success, router]);

  return (
    <div>
      {success ? <p>Success! Redirecting...</p> : <p>Please wait...</p>}
    </div>
  );
};

export default MyComponent;

额外排查点 #

如果修改后仍有问题，可以检查以下内容：

• 确认success状态是单次触发：如果success被重复设置为true，可能会导致多次调用setTimeout，但一般不影响重定向逻辑。
• 检查组件挂载状态：确保MyComponent在success变为true时处于挂载状态，未被父组件的条件渲染提前卸载。

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