React navigation

[MuhammadAzeemShoukat077]

Can we use React Router DOM in Next.js to stop navigation API calls?

[talhajavedcom]

No

it's not recommended to use React Router DOM in Next.js. Use Next.js useRouter and AbortController to stop API calls during navigation.

Stop API Calls on Navigation in Next.js

• useRouter: Detects route changes.
• AbortController: Cancels API calls when navigation starts.
• Cleanup Function: Removes the event listener when the component unmounts.

Code Example

import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    const controller = new AbortController();
    const handleRouteChange = () => controller.abort();

    router.events.on("routeChangeStart", handleRouteChange);
    return () => router.events.off("routeChangeStart", handleRouteChange);
  }, [router]);

  return <div>Page Content</div>;
}