[next/navigation] Next 13: useRouter events?

[waltergalvao]

It seems the new useRouter implementation does not expose events.

Is support for events planned?

https://beta.nextjs.org/docs/app-directory-roadmap#planned-features
Would "Intercepting Routes" here mean events?

[icyJoseph]

Not sure it means events though... #41745 (reply in thread)

Because of concurrent rendering router.events doesn't make sense anymore as any navigation can be canceled without a way to detect that happening.

The way to listen for page changes would be something like this:

'use client'
import {usePathname, useSearchParams} from 'next/navigation'

function useNavigationEvent() {
   const pathname = usePathname()
  const searchParams = useSearchParams()
   useEffect(() => {
      const url = pathname + searchParams.toString()
      sendSomewhere(url)
   }, [pathname, searchParams])
}

[thelonewolf123]

Hey @naeem-qv

you can create a wrapper for <Link/>, and use onClick and unmount event to track the route change start and route change end. for useRouter() hook, you can create a custom hook and add a proxy to the router object to track the .push and .back invocation and use it as a trigger for route change start.

'use client'

import Link from 'next/link'
import { PropsWithChildren, useEffect } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export const CustomLink: React.FC<PropsWithChildren<{ href: string }>> = ({
    href,
    children
}) => {
    useEffect(() => {
        return () => {
            NProgress.done()
        }
    }, [])

    return (
        <>
            <Link href={href} onClick={() => NProgress.start()}>
                {children}
            </Link>
        </>
    )
}

I hope this helps.

[Fox32]

This is actually a bit more tricky. Take care to handle the right keyboard modifiers in the onClick handler. If a user opens a link in a new tab by pressing a key on click, you might not want to start the loading animation.

[dstarosta]

The progress is not going to stop if the href is the same as the current relative URL. You would need a check in the onClick event handler similar to

    if (href === window.location.href.replace(window.location.origin, '')) {
      return;
    }

[NK3678]

Please provide the code to handle it " If a user opens a link in a new tab by pressing a key on click, you might not want to start the loading animation."

[iamsabbirsobhani]

Now its working as indented

"use client";
import Link from 'next/link';
import { PropsWithChildren, useEffect } from 'react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export const Linkn: React.FC<PropsWithChildren<{ href: string }>> = ({
  href,
  children,
}) => {
  useEffect(() => {
    return () => {
      NProgress.done();
    };
  }, []);

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    if (shouldStartAnimation(e)) {
      NProgress.start();
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
    if (shouldStartAnimation(e)) {
      NProgress.start();
    }
  };

  const shouldStartAnimation = (
    e:
      | React.MouseEvent<HTMLAnchorElement>
      | React.KeyboardEvent<HTMLAnchorElement>,
  ): boolean => {
    // Check if it's a left mouse click without any keyboard modifiers
    if (
      (e as React.MouseEvent<HTMLAnchorElement>).button === 0 &&
      !(e as React.MouseEvent<HTMLAnchorElement>).ctrlKey &&
      !(e as React.MouseEvent<HTMLAnchorElement>).shiftKey &&
      !(e as React.MouseEvent<HTMLAnchorElement>).metaKey
    ) {
      // Get the current pathname from window.location
      const currentPathname = window.location.pathname;

      // Check if the link's href is the same as the current pathname
      if (href === currentPathname) {
        return false; // Don't start the animation for same route links
      }

      return true;
    }

    // Check for middle mouse button click
    if ((e as React.MouseEvent<HTMLAnchorElement>).button === 1) {
      return false;
    }

    // Check for right mouse button click
    if ((e as React.MouseEvent<HTMLAnchorElement>).button === 2) {
      return false;
    }

    // Check if it's an accessibility event (e.g., screen reader activation)
    if (
      e.type === 'click' &&
      (e as React.MouseEvent<HTMLAnchorElement>).detail === 0
    ) {
      return true;
    }

    return false;
  };

  return (
    <Link href={href} legacyBehavior>
      <a
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        tabIndex={0} // Ensure the link is keyboard focusable
      >
        {children}
      </a>
    </Link>
  );
};

[garrettparris]

looking for event functionality aswell.

[tinnohofficial]

Please add route events.

[petedegraw]

...and maybe extend the browser APIs rather than break them. Please :)

[pbs-jmo]

Same. Switching to App Router is a bit weird so far because I've not yet found a way to replicate this feature.

[NourAlzway]

@garrettparris, @tinnohofficial, and others,
plz check my answer below, could be a solution to your issue :)

#41934 (comment)

[a95tbirdsc]

How is "pathname" and "searchParams" being used in the statement below. Just trying to understand the code.

Returning those variables?

const pathname = usePathname()
const searchParams = useSearchParams()

useEffect(() => {
const url = pathname + searchParams.toString()
sendSomewhere(url)
}, [pathname, searchParams])

I've also seen this:

useEffect(() => {
const url = pathname + searchParams.toString()
sendSomewhere(url)
}, [ ])

Trying to understand the differences between the two statements.

[joe-pellegrino]

The dependency array [pathname, searchParams] means that the function will execute on render as well as when any one of those values changes.

[a95tbirdsc]

Thank you.

[stevenlafl]

I spent a few hours of scouring the internet for a way to do this. Then a few to build this. Very annoying. Here's my best attempt at a solution. No idea if it's the right approach. It's probably not right for everyone, but if it's right for you, great!

You can instead of the below just use https://www.npmjs.com/package/nextjs13-router-events I published for this reason and follow those instructions.

---

Link.tsx

"use client";

import NextLink from "next/link";
import { forwardRef, useContext } from "react";
import { useRouteChangeContext } from "./RouteChangeProvider";

// https://github.com/vercel/next.js/blob/400ccf7b1c802c94127d8d8e0d5e9bdf9aab270c/packages/next/src/client/link.tsx#L169
function isModifiedEvent(event: React.MouseEvent): boolean {
  const eventTarget = event.currentTarget as HTMLAnchorElement | SVGAElement;
  const target = eventTarget.getAttribute("target");
  return (
    (target && target !== "_self") ||
    event.metaKey ||
    event.ctrlKey ||
    event.shiftKey ||
    event.altKey || // triggers resource download
    (event.nativeEvent && event.nativeEvent.button === 2)
  );
}

const Link = forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(function Link(
  { href, onClick, ...rest },
  ref,
) {
  const useLink = href && href.startsWith("/");
  if (!useLink) return <a href={href} onClick={onClick} {...rest} />;

  const { onRouteChangeStart } = useRouteChangeContext();

  return (
    <NextLink
      href={href}
      onClick={(event) => {
        if (!isModifiedEvent(event)) {
          const { pathname, search, hash } = window.location;
          const hrefCurrent = `${pathname}${search}${hash}`;
          const hrefTarget = href as string;
          if (hrefTarget !== hrefCurrent) {
            onRouteChangeStart();
          }
        }
        if (onClick) onClick(event);
      }}
      {...rest}
      ref={ref}
    />
  );
});

export default Link;

RouteChangeProvider.tsx

import { usePathname, useSearchParams } from 'next/navigation';
import { createContext, useContext, useState, useCallback, Suspense, useEffect } from 'react';

/** Types */
type RouteChangeContextProps = {
  routeChangeStartCallbacks: Function[];
  routeChangeCompleteCallbacks: Function[];
  onRouteChangeStart: () => void;
  onRouteChangeComplete: () => void;
};

type RouteChangeProviderProps = {
  children: React.ReactNode
};

/** Logic */

const RouteChangeContext = createContext<RouteChangeContextProps>(
  {} as RouteChangeContextProps
);

export const useRouteChangeContext = () => useContext(RouteChangeContext);

function RouteChangeComplete() {
  const { onRouteChangeComplete } = useRouteChangeContext();
  
  const pathname = usePathname();
  const searchParams = useSearchParams();
  useEffect(() => onRouteChangeComplete(), [pathname, searchParams]);

  return null;
}

export const RouteChangeProvider: React.FC<RouteChangeProviderProps> = ({ children }: RouteChangeProviderProps) => {
  const [routeChangeStartCallbacks, setRouteChangeStartCallbacks] = useState<Function[]>([]);
  const [routeChangeCompleteCallbacks, setRouteChangeCompleteCallbacks] = useState<Function[]>([]);
  
  const onRouteChangeStart = useCallback(() => {
    routeChangeStartCallbacks.forEach((callback) => callback());
  }, [routeChangeStartCallbacks]);

  const onRouteChangeComplete = useCallback(() => {
    routeChangeCompleteCallbacks.forEach((callback) => callback());
  }, [routeChangeCompleteCallbacks]);
  
  return (
    <RouteChangeContext.Provider
      value={{
        routeChangeStartCallbacks,
        routeChangeCompleteCallbacks,
        onRouteChangeStart,
        onRouteChangeComplete
      }}
    >
      {children}
      <Suspense>
        <RouteChangeComplete />
      </Suspense>
    </RouteChangeContext.Provider>
  );
};

useRouteChange.tsx

import { useEffect } from 'react';
import { useRouteChangeContext } from './RouteChangeProvider';

type CallbackOptions = {
  onRouteChangeStart?: Function;
  onRouteChangeComplete?: Function;
}

const useRouteChange = (options: CallbackOptions) => {
  const { routeChangeStartCallbacks, routeChangeCompleteCallbacks } = useRouteChangeContext();
  
  useEffect(() => {
    // add callback to the list of callbacks and persist it
    if (options.onRouteChangeStart) {
      routeChangeStartCallbacks.push(options.onRouteChangeStart);
    }
    if (options.onRouteChangeComplete) {
      routeChangeCompleteCallbacks.push(options.onRouteChangeComplete);
    }

    return () => {
      // Find the callback in the array and remove it.
      if (options.onRouteChangeStart) {
        const index = routeChangeStartCallbacks.indexOf(options.onRouteChangeStart);
        if (index > -1) {
          routeChangeStartCallbacks.splice(index, 1);
        }
      }
      if (options.onRouteChangeComplete) {
        const index = routeChangeCompleteCallbacks.indexOf(options.onRouteChangeComplete);
        if (index > -1) {
          routeChangeCompleteCallbacks.splice(index, 1);
        }
      }
    };
  }, [options, routeChangeStartCallbacks, routeChangeCompleteCallbacks]);
};

export default useRouteChange;

Then use like this:

Replace regular NextJS Link components with this one:

import { Link } from './Link';

That Link component should be compatible with your setup.

Your layout.tsx:

import { RouteChangeProvider } from './RouteChangeProvider';
...
return (
  <RouteChangeProvider>
    {children}
  </RouteChangeProvider>
)

Your component, where you want to monitor the onRouteChangeStart and onRouteChangeComplete events:

import useRouteChange from './useRouteChange';
...
export default function Component(props: any) {
  ...
  useRouteChange({
    onRouteChangeStart: () => {
      console.log('onStart 3');
    },
    onRouteChangeComplete: () => {
      console.log('onComplete 3');
    }
  });
  ...
}

[saeideh-abs]

could you please give an example of how we should use it? it seems onRouteChangeStart is not working. I can not see "onStart 3" in my console

[stevenlafl]

@saeideh-abs Use the Link component above instead of the standard Link component. On clicking it, you should see it.

[aminrms]

It is suitable for routing with useRouter from "router/navigation"?

[tinnohofficial]

Thank you. I appreciate it. I am gonna follow up on the code implementation. Yours truly, Augustino M.

…

On Sun, Jul 16, 2023, 1:08 PM Steven Linn ***@***.***> wrote: I spent a few hours of scouring the internet for a way to do this. Then a few to build this. Very annoying. Here's my best attempt at a solution. No idea if it's the right approach. It's probably not right for everyone, but if it's right for you, great! You can instead of the below just use https://www.npmjs.com/package/nextjs13-router-events I published for this reason and follow those instructions. ------------------------------ *Link.tsx* "use client"; import NextLink from "next/link";import { forwardRef, useContext } from "react";import { useRouteChangeContext } from "./RouteChangeProvider"; // https://github.com/vercel/next.js/blob/400ccf7b1c802c94127d8d8e0d5e9bdf9aab270c/packages/next/src/client/link.tsx#L169function isModifiedEvent(event: React.MouseEvent): boolean { const eventTarget = event.currentTarget as HTMLAnchorElement | SVGAElement; const target = eventTarget.getAttribute("target"); return ( (target && target !== "_self") || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || // triggers resource download (event.nativeEvent && event.nativeEvent.button === 2) );} const Link = forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(function Link( { href, onClick, ...rest }, ref,) { const useLink = href && href.startsWith("/"); if (!useLink) return <a href={href} onClick={onClick} {...rest} />; const { onRouteChangeStart } = useRouteChangeContext(); return ( <NextLink href={href} onClick={(event) => { if (!isModifiedEvent(event)) { const { pathname, search, hash } = window.location; const hrefCurrent = `${pathname}${search}${hash}`; const hrefTarget = href as string; if (hrefTarget !== hrefCurrent) { onRouteChangeStart(); } } if (onClick) onClick(event); }} {...rest} ref={ref} /> );}); export default Link; *RouteChangeProvider.tsx* import { usePathname, useSearchParams } from 'next/navigation';import { createContext, useContext, useState, useCallback, Suspense, useEffect } from 'react'; /** Types */type RouteChangeContextProps = { routeChangeStartCallbacks: Function[]; routeChangeCompleteCallbacks: Function[]; onRouteChangeStart: () => void; onRouteChangeComplete: () => void;}; type RouteChangeProviderProps = { children: React.ReactNode}; /** Logic */ const RouteChangeContext = createContext<RouteChangeContextProps>( {} as RouteChangeContextProps); export const useRouteChangeContext = () => useContext(RouteChangeContext); function RouteChangeComplete() { const { onRouteChangeComplete } = useRouteChangeContext(); const pathname = usePathname(); const searchParams = useSearchParams(); useEffect(() => onRouteChangeComplete(), [pathname, searchParams]); return null;} export const RouteChangeProvider: React.FC<RouteChangeProviderProps> = ({ children }: RouteChangeProviderProps) => { const [routeChangeStartCallbacks, setRouteChangeStartCallbacks] = useState<Function[]>([]); const [routeChangeCompleteCallbacks, setRouteChangeCompleteCallbacks] = useState<Function[]>([]); const onRouteChangeStart = useCallback(() => { routeChangeStartCallbacks.forEach((callback) => callback()); }, [routeChangeStartCallbacks]); const onRouteChangeComplete = useCallback(() => { routeChangeCompleteCallbacks.forEach((callback) => callback()); }, [routeChangeCompleteCallbacks]); return ( <RouteChangeContext.Provider value={{ routeChangeStartCallbacks, routeChangeCompleteCallbacks, onRouteChangeStart, onRouteChangeComplete }} > {children} <Suspense> <RouteChangeComplete /> </Suspense> </RouteChangeContext.Provider> );}; *useRouteChange.tsx* import { useEffect } from 'react';import { useRouteChangeContext } from './RouteChangeProvider'; type CallbackOptions = { onRouteChangeStart?: Function; onRouteChangeComplete?: Function;} const useRouteChange = (options: CallbackOptions) => { const { routeChangeStartCallbacks, routeChangeCompleteCallbacks } = useRouteChangeContext(); useEffect(() => { // add callback to the list of callbacks and persist it if (options.onRouteChangeStart) { routeChangeStartCallbacks.push(options.onRouteChangeStart); } if (options.onRouteChangeComplete) { routeChangeCompleteCallbacks.push(options.onRouteChangeComplete); } return () => { // Find the callback in the array and remove it. if (options.onRouteChangeStart) { const index = routeChangeStartCallbacks.indexOf(options.onRouteChangeStart); if (index > -1) { routeChangeStartCallbacks.splice(index, 1); } } if (options.onRouteChangeComplete) { const index = routeChangeCompleteCallbacks.indexOf(options.onRouteChangeComplete); if (index > -1) { routeChangeCompleteCallbacks.splice(index, 1); } } }; }, [options, routeChangeStartCallbacks, routeChangeCompleteCallbacks]);}; export default useRouteChange; Then use like this: Replace regular NextJS Link components with this one: import { Link } from './Link'; That Link component should be compatible with your setup. Your layout.tsx: import { RouteChangeProvider } from './RouteChangeProvider'; ...return ( <RouteChangeProvider> {children} </RouteChangeProvider>) Your component, where you want to monitor the onRouteChangeStart and onRouteChangeComplete events: import useRouteChange from './useRouteChange'; ...export default function Component(props: any) { ... useRouteChange({ onRouteChangeStart: () => { console.log('onStart 3'); }, onRouteChangeComplete: () => { console.log('onComplete 3'); } }); ...} — Reply to this email directly, view it on GitHub <#41934 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK7QDGWZFJSYXGE3OBZRS4DXQO4S5ANCNFSM6AAAAAARPUBUTE> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[pfischer1290]

also, there is still no possibility to stop a route change event as there was with the page router, correct?
very annoying and breaks the use case of preventing a user to accidentally navigate away from a partially filled form, for example.

or does anybody have a solution to this use case with nextjs app router?

i tried everything possible already.
see this discord thread for reference: https://discord.com/channels/752553802359505017/1119298354288013322

[pfischer1290]

no... i think there is no possibility until there is no support by the app router... maybe any maintainer could give an update?

[fdev]

I need route change blocking for the exact same reason.

[neilpoulin]

I literally just converted an old app to Next 14 with one of the big new features planned was preventing navigation away from un-saved forms... and now I find out it's not even possible with the latest stack (but was in the now-legacy pages directory).

I did get it working by moving the page(s) that need the beforeunload hooks into the pages directory and have everything else in the app directory, but this has some major drawbacks, namely that navigating between the app and pages directory looses all app context, since it is no longer working as a Single Page App. Meaning, I have to re-load my data (using SWR), and re-auth, which is very slow. So much so that I had to scrap it.

Very disappointing.

[fabb]

Oh no, I'm in the progress of migrating an app and I need to migrate exactly this feature. Yay.

[SalahAdDin]

Anyway to ask to Vercel team on working on this issue?

[myskotima130]

Any updates about possibility to block route change?

[pfischer1290]

bump. is there any maintainer sticking around here?

[smyja]

next13 is definitely not production ready.

[Fiontan]

But it's getting there rapidly with obvious improvements each release it must be said.

[iamsabbirsobhani]

Agreed, router event is an important functionality for an app. It should have been prioritized in the first place.

[JannikZed]

now we are talking next.js 15 and it still doesn't feel production ready and still no router events.. it was such a big mistake from us starting two big production projects with the app router - now we are still stuck with this beta framework and very bad user experience :(

[paulm17]

Hopefully Next14 will have some improvements? 🤔

[samuhmatos]

next 14 appearing in 2050 lol

[neilpoulin]

it's here now and no improvements in terms of the router

[SalahAdDin]

NO improvement yet.

[JannikZed]

next.js 15 - still no improvements.. crazy

[hvitis]

I am also confused when it comes to the events or documentation changes between function versions (I have a legacy app to maintain)

[melodyclue]

Are there any alternative solutions?

[samuhmatos]

I am working in a package able to change route using events to make the load animation. https://www.npmjs.com/package/nextjs-progressloader

[praveennagaraj97]

@samuhmatos Doesn't work when page is navigated using router.push()!

[samuhmatos]

To invoke a route with progress bar animation, use the function changeRoute() instead router.push().
I hight recommend you read the documentation to see about Container and changeRoute()
see: https://github.com/samuhmatos/nextjs-progressloader#advanced-usage

[raulbarriga]

Needed router.events.on() for a loading progress bar.

[samuhmatos]

For everyone who want to make loading animation when change route, i am working in a package able to replace the useRouter() WITHOUT LOSING THE PREFETCH NEXT FEATURE
https://www.npmjs.com/package/nextjs-progressloader

[melodyclue]

Is it possible to implement only those screens where router events are required in the pages directory?
What I want to do is to control the user leaving the screen when their input is not saved in the middle of a page.

[samuhmatos]

You can add whatever route you would need. Everything you have to do is create a ContainerLink, but make sure where you're creating the container to be available where you need!

[reo-yamashita]

I think router.events is needed to prevent users leaving while typing, why did the team remove it? Does anyone know why?

[MarcoBeyer]

I rolled back to the pages router because I couldn't prevent useres from leaving page without saving.

[reo-yamashita]

If I want to do that, is it best to use the pages directory at the moment and be prepared to move to the app router at any time?

[samuhmatos]

I think thy want we doing our own system navigation. Have sense? No, bu to Vercel has!

[pfischer1290]

thats exactly the functionality what we are missing. it is impossible to implement with the app router :(

[samuhmatos]

I am trying to find in the releases notes if they explained to the community, but still nothing.

[SalahAdDin]

@leerob This discussion is not solved yet.

[sovetski]

exactly!

[NourAlzway]

Hi @SalahAdDin

check out my comment here #41934, it could be a helpful solution for you

[michalstruck]

Look up how easy this is in SvelteKit - just import beforeNavigate, and use a callback to get the behaviour you want.

[GrahamQuan]

They had it in /page route but remove in /app route, honestly all framework have this feature except nextjs 13 /app route

[SalahAdDin]

They had it in /page route but remove in /app route, honestly all framework have this feature except nextjs 13 /app route

Next 14 and 15 I guess!

[ArneCordes]

Just to be sure: there is no way to warn users when they leave a form with unsaved changes, by whichever way (closing the tab, back button, clicking a link)? It looks like there is only a quite complicated workaround that does not support the back button. For complex forms it would be more than helpful to have a complete and official solution 🙏

[alexblazevski]

Hey, just commented a solution which might be handy for you: #41934 (comment)

[JannikZed]

After reading through all discussions I still can't find a new solution for the routeChangeComplete event. We need to trigger our analytics first when the route change completed, as we are using HTML tags and the elbwalker: https://github.com/elbwalker/walkerOS
How should I solve this issue? The pathname gets replaced immediately, even when the whole page is not loaded yet, so tracking like that is impossible..
How can I get my routeChangeComplete event back?

[NourAlzway]

Hi @JannikZed,

check out my comment #41934, it might be a helpful solution for your implementation

[alexblazevski]

For anyone who needs to prevent navigation away from forms, i stumbled across this article: https://medium.com/@joaojbs199/page-exit-prevention-in-nextjs-14-7f42add43297, and the solution works like a charm - handles back button clicks, any navigations away, and also if you try close the tab the browser steps in to ask if you want to leave.

I had to make a few tweaks, the crucial one being wrapping the pushState statement on lines 25-27 in a useEffect, as thats what got things working for me:

  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.history.pushState(null, document.title, window.location.href);
    }
  }, [window]);

I also removed the backHref parameter and made line 41 just trigger a window.history,back() instead of pushing the backHref

Huge credit to João who came up with the solution, this has saved me alot of headache

[fabb]

Thank you, using pushState is a good idea. It might not work 100% for my use case, because I use shallow routing on my form page when saving it without leaving the form (the saved object id is added as query parameter). But the solution might be modified to fix this case.
I dislike the querySelectorAll part and rather use a global provider to modify my links and other router push events.

[zalog]

@alexblazevski thanks for sharing this!

About your first tweak.

• you can remove checking for window, because useEffect don't run on the server
• [window] dependency is not necessary because "Outer scope values like 'window' aren't valid dependencies because mutating them doesn't re-render the component."

useEffect(() => {
  window.history.pushState(null, document.title, window.location.href);
}, []);

[SalahAdDin]

@alexblazevski thanks for sharing this!

About your first tweak.

* you can remove checking for `window`, because `useEffect` don't run on the server

* `[window]` dependency is not necessary because "Outer scope values like 'window' aren't valid dependencies because mutating them doesn't re-render the component."

useEffect(() => {
  window.history.pushState(null, document.title, window.location.href);
}, []);

where did you find that information?

[zalog]

• useEffect - "Effects don’t run on the server, so this is why didMount was false during the initial server render." - react.dev
• [window] dependency - eslint - react-hooks/exhaustive-deps, MDN

[phongtran911]

any update on it?
this feature is very important to show confirm when user want to leave some page with un saved data

[Op-Pautu]

why remove a perfectly working feature in next/router is beyond my understanding

[ypresto]

I created a library for page leave confirmation!

https://github.com/LayerXcom/next-navigation-guard

It works with both App Router and Pages Router.
Also supports custom dialog component.

How it works is described here:
https://speakerdeck.com/ypresto/cancel-next-js-page-navigation-full-throttle

[Wilian-Pereira-W]

I just wish I could use:

Router?.events.on(routeChangeStart, () => setIsLoading(true));
Router?.events.on(routeChangeComplete, () => setIsLoading(false));

Again in nextjs13.

[ThulinaWickramasinghe]

Has this been added again in Next.js 14? I see it listed in the documentation.

https://nextjs.org/docs/14/pages/api-reference/functions/use-router#routerevents

[fdev]

That's the documentation of the Pages Router, which has always had router events.

[ThulinaWickramasinghe]

Thank you very much. I didn't notice this post was about the app router.

[vpishuk]

I tried the proposed solution but it didn't work for me.
I'm developing an app https://vocabloo.com where users are doing some educational activities. I don't think there is a need to persist a state of an activity for now because those activities are about small learning bytes which require up to 5-10 minutes to do and you better complete the whole activity instead of pausing in the middle.
I'm using nextui library as a primary tool.
BeforeUnload didn't work for me because it is firing only when user performs hard navigation.
monitoring of searchparams and pathname does not work for me, because I need to ask user to confirm intent to stop an activity if it is still in progress before navigating.
I developed a simple extension that adds events back into a router.
Here it is: https://github.com/vpishuk/nextjs-app-router-events

I hpe, this helps.

[abdelrahman-mh]

@LuisanSuarez have a nice implementation here to listen on 'on navigation start' and 'on navigation done (full loaded)' events: #42016 (comment)

Edit: Because the indicator not works when press back button on the browser

we can fix it by listen on popstate event like so:

'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import nProgress from 'nprogress';
import { useEffect } from 'react';

export default function NavigationEvents() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const router = useRouter();

  useEffect(() => {
    // Override router.push for start nprogress
    const _push = router.push.bind(router);

    router.push = (href, options) => {
      nProgress.start();
      _push(href, options);
    };

    const handlePopState = () => {
      nProgress.start();
    };

    // Popstate listener to handle back/forward navigation
    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  useEffect(() => {
    nProgress.done();
  }, [pathname, searchParams]);

  return null;
}

[fabb]

Conspiracy theory: Vercel is ignoring rants about router events until the Navigation API has enough browser support and then implements events based on this new browser API.

[SalahAdDin]

Conspiracy theory: Vercel is ignoring rants about router events until the Navigation API has enough browser support and then implements events based on this new browser API.

it will take a lot of time

[stevenlafl]

Conspiracy theory: Vercel is ignoring rants about router events until the Navigation API has enough browser support and then implements events based on this new browser API.

Possibly..

I mean, if they're withholding and that was the reason.. enough engineers use nextJS that I imagine at least a couple of them help maintain a browser. Why not just say that?

[abdelrahman-mh]

Nice solution, but the platform should support the events!

Yes, but in our use case (nProgress bar) this works 100% correct, And we can improve it by using new React hook useTransition,
We will use useTransition as a wrapper for router navigation to handle loading state:

router.push = (href, options) => {
  // This works as a safe wrapper for loading progress bar
  startTransition(() => {
    nProgress.start();
    _push(href, options);
  });
};

Full Example:

function NavigationEvents() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  useEffect(() => {
    // Override router.push for start nprogress
    const _push = router.push.bind(router);

    router.push = (href, options) => {
      // This works as a safe wrapper for loading progress bar
      startTransition(() => {
        nProgress.start();
        _push(href, options);
      });
    };

    const handlePopState = () => {
      nProgress.start();
    };

    // Popstate listener to handle back/forward navigation
    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  useEffect(() => {
    if (!isPending) {
      nProgress.done();
    }
  }, [isPending, pathname, searchParams]);

  return null;
}

Actually This also fixing a bug, Without using useTransition hook, if we redirect the Response Using Nextjs in the Middleware for example, nProgress bar will run infinitely!, but this fixing it 👌

[SalahAdDin]

There is a plugin now, we could work on it.

[tabvn]

we need router events start, end events for transition. Please bring it back.

Thanks

[nocodehummel]

Scroll related issues are plenty and not prioritized. Scroll (restoration) bugs have major impact on the end-user. Next/navigation router introduced the bugs and also removed the possibility to implement a workaround using events. We need router events to make things work that Next.js team does not fix.

[leerob]

Hey everyone, I wanted to share one solution that might be relevant for you all. I saw a few comments in here related to handing popstate and the browser back button, so figured I'd write this up.

Here was my use case:

• I needed to animate between different routes, from / to an individual product page
• The URL should update when changing routes, and both clicking back in the navbar and the browser back button need to work
• Reloading the page on the product detail page /p/[slug] needs to correctly start on the detail state (no animation)

I can definitely empathize with this being confusing, and apologize we haven't done enough to create examples or show how this could be possible. For example, trying to animate across routes using framer-motion (now motion) using the default page files in the App Router won't work exactly – you can't use the layoutId to transition the element. You might think – okay, maybe I need to use intercepted routes for a modal-like pattern, but that also isn't the right solution here.

The solution I landed on is this:

• I'm using motion to animate between my two different "states" in the app (grid of products, product detail page)
• When clicking on a product, we start the animation but also shallow update the URL with window.history.pushState
• We add a useEffect to listen to the popstate event to handle the browser back action
• We have a /p/[slug]/page.tsx route, which has the detail page, to handle direct linking or reloads post-animation

This isn't perfect – for example, if you manually swipe back in iOS Safari. The most ideal solution here is View Transitions, which you can use https://next-view-transitions.vercel.app for in some cases. However, I couldn't get it working perfectly for the animation I was going for in this case, and also there isn't Firefox support yet for View Transitions. I do believe this is the best solution in the future though.

• Code: https://github.com/leerob/next-minimal-store
• Demo: https://nextzy.vercel.app/

CleanShot.2024-12-29.at.14.56.21.mp4

Hope this helps! 🙏

[zigang93]

@leerob please give me a simple solution of how to detect page change is loading state or complete.