Next.js报错求助：Property 'push'不存在于类型'() => AppRouterInstance'

错误原因 #

• 错误将useRouter()包装成函数赋值给router变量，导致router成为普通函数而非路由实例，调用router.push自然会提示属性不存在
• 未正确获取App Router提供的路由实例，导致运行时触发类型错误

修复后的代码 #

"use client";
import { useRouter } from "next/navigation";

const Home = () => {
  // 直接获取路由实例，无需包装成函数
  const router = useRouter();
  
  const navigate = (name: string) => {
    router.push(name);
  };

  return (
    <main>
      <h1>Basic routing</h1>
      <button type="button" onClick={() => navigate('/about')}>About Page</button>
    </main>
  );
};

export default Home;

额外说明 #

• 当前使用的是Next.js 13+的App Router路由系统，需保持从next/navigation导入useRouter；若使用旧版Pages Router，才需要从next/router导入
• 必须保留"use client"指令，因为useRouter属于客户端组件专属钩子，仅能在客户端组件中使用

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