NextJS 13中router.events未定义问题求助（已导入next/navigation）

问题根源 #

• NextJS 13的App Router（app目录）下，next/navigation提供的useRouter没有events属性，这是Pages Router专属API
• 在App Router环境中使用next/router会报错，因为NextRouter仅在Pages Router页面中挂载

解决方案：使用useNavigation钩子 #

NextJS 13.4+为App Router提供了useNavigation钩子，可直接获取当前导航状态，替代原有的router.events监听方式。

修改后的完整代码 #

"use client";
import React, { useState } from "react";
import { useNavigation } from "next/navigation";
import Link from "next/link";
import axios from "axios";

const Header = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false); 
  const navigation = useNavigation();

  // 合并表单提交状态和路由导航状态
  const isLoading = isSubmitting || navigation.state === "loading";

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true); 

    try {
      const response = await axios.get(`/result?search_query=${encodeURIComponent(searchQuery)}`);
      const data = response.data;

      console.log("Search Results:", data);
      router.push(`/result?search_query=${encodeURIComponent(searchQuery)}`);
    } catch (error) {
      console.log("Error:", error);
    } finally {
      setIsSubmitting(false); 
    }
  };

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    {/* 渲染内容，可根据isLoading显示加载文本 */}
    <div>
      {isLoading && <p>加载中...</p>}
      <form onSubmit={handleFormSubmit}>
        <input
          type="text"
          value={searchQuery}
          onChange={handleInputChange}
          placeholder="搜索..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "搜索中..." : "搜索"}
        </button>
      </form>
    </div>
  );
};

export default Header;

关键修改点 #

1. 替换useRouter为useNavigation，从next/navigation导入
2. 移除原有的useEffect监听router.events的代码
3. 通过navigation.state判断路由是否处于加载状态（"loading"表示正在导航）
4. 将表单提交的isSubmitting状态与路由加载状态合并，得到整体的isLoading

注意事项 #

• 确保你的NextJS版本在13.4及以上，useNavigation是13.4版本引入的
• 组件必须保留"use client"指令，因为useNavigation是客户端钩子

内容的提问来源于stack exchange，提问作者Wan Ahmad Aiman