NextJS 13 TypeError: router.events is undefined, next/navigation already imported

Question

I'm trying to show Loading text while the route is loading the url state using the latest nextjs 13, next/router replaced with next/navigation

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

const Header = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [isLoading, setIsLoading] = useState(false); 
  const router = useRouter();

  useEffect(() => {
    const handleStart = () => {
      setIsLoading(true); 
    };

    const handleComplete = () => {
      setIsLoading(false); 
    };

    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);

    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
    };
  }, [router]);

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(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 {
      setIsLoading(false); 
    }
  };

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

  return (
    {/* Render data */}
  );
};

export default Header;

Using next/router gives Error: NextRouter was not mounted.

My file is in app/components/Header.jsx, changing to client side to pages/Header.jsx also not working

Answer 1

i ran in to the same issue

router.events doesn't exist anymore on Next.js 13

doing a quick search on git found some help

https://github.com/vercel/next.js/discussions/42016?sort=new

hope this helps