[Next 13] router.events removed?

[LorenzoBloedow]

router.events doesn't exist anymore on Next.js 13 and there doesn't seem to be a replacement, is this a permanent change?

[waltergalvao]

I think it's on their roadmap (interceptors). I asked the same here: #41934

[LorenzoBloedow]

Thank you so much, didn't know they had a roadmap page. And yeah I'm not sure that means router events but because they didn't implement it in the new router yet and also because of the name, I think it's highly likely that's exactly what that means.

[carlos-dubon]

Unfortunately, that doesn't mean router events.

[SalahAdDin]

Where are such interceptors?

[icyJoseph]

I think I have bad news...

#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])
}

[brandonscript]

This seems to work ok @icyJoseph but because UrlSearchParams contains unmemorized functions, useEffect is doing a shallow compare, and causing it to re-render like crazy. This is a little safer (+ TypeScript):

import { useEffect, useRef } from "react";

export const usePrevious = <T>(value: T) => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

interface NavigationEvents {
  routeChanged?: ({
    pathname,
    searchParams,
  }: {
    pathname: string | null;
    searchParams: URLSearchParams | null;
  }) => void;
}

export const useNavigation = ({ on }: { on?: NavigationEvents }) => {
  const pathname = usePathname();
  const prevPathname = usePrevious(pathname);

  const searchParams = useSearchParams();
  const prevSearchParams = usePrevious(searchParams);

  const { routeChanged } = on || {};
  const [route, setRoute] = useState({ pathname, searchParams });

  useEffect(() => {
    if (searchParams?.toString() !== prevSearchParams?.toString() || pathname !== prevPathname) {
      setRoute({ pathname, searchParams });
      routeChanged?.({ pathname, searchParams });
    }
  }, [pathname, prevPathname, prevSearchParams, routeChanged, searchParams]);

  return { route };
};

[bestLessons]

why not

useEffect(() => {
  ...
}, [searchParams?.toString(), pathname])

[mikestead]

Previously I used routeChangeStart to save custom page restoration state (nested carousel scroll positions etc) against the current page history entry before the navigation change took place. Now this doesn't seem possible.

[myhendry]

I'm currently using router.events for firebase analytics. Now that router.events has been removed from nextjs 13.4, anyone has any idea how to implement firebase analytics in nextjs 13.4? I'm concerned if i switch over to nextjs 13.4 now, my firebase analytics will cease to work

Thanks

function MyApp({ Component, pageProps: { ...pageProps } }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      const fbAnalytics = getAnalytics();

      const logEventFn = (url: string) => {
        setCurrentScreen(fbAnalytics, url);
        logEvent(fbAnalytics, "screen_view");
      };

      router.events.on("routeChangeComplete", logEvent);
      logEventFn(window.location.pathname);

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

  return (
    <>
      <AuthContextProvider>
        <Navbar />
        <Component {...pageProps} />
        <Analytics />
        <ToastContainer position="bottom-center" />
      </AuthContextProvider>
    </>
  );
}

[vanyapr]

You can pass the callback function to the hook described above. For example, like this.

const reportEvent = () => {
  // some kind of logger action
  console.log("Event")
}

const routeChangeHandler = useNavigationEvent(reportEvent);

In general, I would transfer the logic concerning firebase to the hook itself, and in the components I would only call the hook.

[myhendry]

@vanyapr I can't find where you are imported useNavigationEvent? i'm using next 13.4.1. i need to log the event to my firebase analytics and not in my console. my previous setup above was working perfectly fine before next 13.4 and i was able to view the analytics on my firebase dashboard. after upgrading, the router.events... functions are no longer there hence my previous setup can't work. Thanks :)

[FackJox]

it's the hook written here: #42016 (reply in thread)

[SalahAdDin]

@fluid-design-io Crack!

[leerob]

Learn more here: https://nextjs.org/docs/app/api-reference/functions/use-router#router-events

[adamchipperfield]

@leerob I think we're looking specifically for the start and end events, so loading bars, for example, can run.

[ealexhaywood]

@adamchipperfield could you move your routeChangeStart code into the click handler for a given link, with your routeChangeComplete code would running inside an effect using usePathname() and/or useSearchParams()? Seems like that would accomplish the same thing

[carlos-dubon]

@leerob can we prioritize this please!! we need routeChangeStart and routeChangeComplete

[cibulka]

@leerob Yeah, the link is not helpful at all. It describes how to get the current URL, not how to listen to a "route change start" and "route change end". 🤷

[LuisanSuarez]

@cibulka you can trigger a route-change-start by modifying the router.push method. for route-change-end, you can infer it with useEffect

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

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

  const router = useRouter();

  const _push = router.push.bind(router);

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

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

  return null;
}

[EnkhAmar]

    useEffect(() => {
        router.events.on('routeChangeComplete', () => setShowMobileNavbar(false));
        router.events.on('routeChangeError', () => setShowMobileNavbar(false));

        return () => {
            router.events.off('routeChangeComplete', () => setShowMobileNavbar(false));
            router.events.off('routeChangeError', () => setShowMobileNavbar(false));
        };
    })

I can't listen to router events. What is an alternative way to write code?

[DIEGOHORVATTI]

Nextjs12

useEffect(() => {
    const handleStart = () => {
      NProgress.start()
    }
    const handleStop = () => {
      NProgress.done()
    }

    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])

Nextjs13

useEffect(() => {
    const handleStart = () => {
      NProgress.start()
    }
    const handleStop = () => {
      NProgress.done()
    }

    handleStop()

    return () => {
      handleStart()
    }
  }, [pathname, searchParams])

[christiankaindl]

@DIEGOHORVATTI those two are not the same. The Nextjs 13 version of yours would not start the NProgress bar until after the URL has changed, which is not immediately.

[DIEGOHORVATTI]

As incredible as it may seem, it is working perfectly, I don't know what black magic I used on this

[juliomuhlbauer]

I think Nextjs is unmounting and mounting the components that uses useSearchParams hook. So this kinda words.

[DIEGOHORVATTI]

@juliomuhlbauer @christiankaindl

this worked for me so far, It's the closest to what worked before that I found

progress-bar.tsx

'use client';

import { useEffect } from 'react';
import NProgress from 'nprogress';
import StyledProgressBar from './styles';

type PushStateInput = [data: any, unused: string, url?: string | URL | null | undefined];

export default function ProgressBar() {
  useEffect(() => {
    NProgress.configure({ showSpinner: false });

    const handleAnchorClick = (event: MouseEvent) => {
      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
      const currentUrl = window.location.href;
      if (targetUrl !== currentUrl) {
        NProgress.start();
      }
    };

    const handleMutation: MutationCallback = () => {
      const anchorElements: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('a[href]');

      anchorElements.forEach((anchor) => anchor.addEventListener('click', handleAnchorClick));
    };

    const mutationObserver = new MutationObserver(handleMutation);

    mutationObserver.observe(document, { childList: true, subtree: true });

    window.history.pushState = new Proxy(window.history.pushState, {
      apply: (target, thisArg, argArray: PushStateInput) => {
        NProgress.done();
        return target.apply(thisArg, argArray);
      },
    });
  });

  return <StyledProgressBar />;
}

styles.ts

'use client';

import { useTheme } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';

export default function StyledProgressBar() {
  const theme = useTheme();

  const inputGlobalStyles = (
    <GlobalStyles
      styles={{
        '#nprogress': {
          pointerEvents: 'none',
          '.bar': {
            top: 0,
            left: 0,
            height: 2.5,
            zIndex: 9999,
            width: '100%',
            position: 'fixed',
            backgroundColor: theme.palette.primary.main,
            boxShadow: `0 0 2px ${theme.palette.primary.main}`,
          },
          '.peg': {
            right: 0,
            opacity: 1,
            width: 100,
            height: '100%',
            display: 'block',
            position: 'absolute',
            transform: 'rotate(3deg) translate(0px, -4px)',
            boxShadow: `0 0 10px ${theme.palette.primary.main}, 0 0 5px ${theme.palette.primary.main}`,
          },
        },
      }}
    />
  );

  return inputGlobalStyles;
}

[AbhishekAglave]

If anybody was using it to show loading between page transitions then you can use the following
import { Suspense } from "react";
<Suspense fallback={<div>Loading</div>}>{children}</Suspense>

[christiankaindl]

Yes, but that replaces the previous content when showing the fallback. So it doesn't make the NProgress use-case possible, which shows a progress indicator over the previous content, not replacing it.

[RakaDoank]

The loading.(js|tsx) file will replace all the current content with the loading component which is not what i want to.
Like in my previous Next 12 with the events, it will show the loader bar in top over the current content until the route is changed.

I hope the router events back, or equally for Next 13 within app router

[RakaDoank]

For my temporary solution. I ended up by listening to the document click event. It's inspired by nextjs-toploader, but it only works for next/link component. Not programmatically like router.push and router.replace. Better than nothing. So, i created a react context that can automatically listen to the next/link clicking (listen to the anchor element actually), and also start and stop function for the loader animation

here my sample

[mmalomo]

I am using something like this, basically not using router.push directly

export interface NavigationContextType {
  goToRoute: (route: string) => void;
}

export const NavigationContext = createContext<NavigationContextType>({
  goToRoute: (route: string) => { }
});

export const NavigationProvider = ({ children }: { children: ReactNode }) => {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [loading, setLoadgin] = useState(false);

  const goToRoute = (path: string) => {
    setLoadgin(true);
    router.push(path);
  }

  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    setLoadgin(false);
  }, [pathname, searchParams])

  const contextValue = {
    goToRoute
  };

  return (<
    NavigationContext.Provider value={contextValue}>
    {children}
    <BlockUi show={loading} />
  </NavigationContext.Provider>
  );
}

export const useNavigation = () => useContext(NavigationContext);

[samuhmatos]

Already is better than the actual solutions but..... It still looks quick fix....
Nothing can replace router events

[enchorb]

Anyone have a working example of nprogress without router.events?

[christiankaindl]

For a quick and easy solution you can use nextjs-toploader and import it into your root layout.tsx. Works good enough, but has small issues like clicking a link with Ctrl (in a new tab) triggers the loader and never finishes... though the general approach of the package is sane, I want to publish a package that only does the router events part soon. Hope this helps

[chrisBas]

@enchorb , i added an example below that might help

[paonep1]

@christiankaindl nextjs-toploader is not working bro..

[Matheus8174]

I create a NextJs Context and Hook to help you handle with the code that will be run when user leave some application route.

import React from 'react';

import { usePathname } from 'next/navigation';

type TargetsRouteToHandle = {
	[x: string]: (() => void) | undefined;
};

type NavigationEventContextValue = {
	addTargetRoute: (targetRoute: AddTargetRouteProps) => void;
};

type AddTargetRouteProps = {
	pathName: string;
	hookFunction: TargetsRouteToHandle['x'];
};

const NavigationEventContext = React.createContext<NavigationEventContextValue>(
	{} as NavigationEventContextValue
);

export const useNavigationEvent = () =>
	React.useContext(NavigationEventContext);

function NavigationEventProvider({ children }: React.PropsWithChildren) {
	const pathName = usePathname();

	const pathHistory = React.useRef<[string, string]>(['', pathName]);

	const [targetsRouteToHandle, setTargetsRouteToHandle] =
		React.useState<TargetsRouteToHandle>({});

	const addTargetRoute = ({ pathName, hookFunction }: AddTargetRouteProps) => {
		setTargetsRouteToHandle((prev) => ({ ...prev, [pathName]: hookFunction }));
	};

	React.useEffect(() => {
		const prev = pathHistory.current.at(0) as string;

		const isLeavingATargetRoute = targetsRouteToHandle[prev];

		if (isLeavingATargetRoute) isLeavingATargetRoute();

		pathHistory.current.push(pathHistory.current.shift() as string);

		pathHistory.current.unshift(pathName);

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [pathName]);

	return (
		<NavigationEventContext.Provider value={{ addTargetRoute }}>
			{children}
		</NavigationEventContext.Provider>
	);
}

export default NavigationEventProvider;

Example of use

this way every time the user leave the route '/chat' the code from hookFunction will be called, you can create how many addTargetRoute you want.

React.useEffect(() => {
    addTargetRoute({
        pathName: '/chat',
        hookFunction: () => {
            console.log('Trocou a pagina');
        }
    });
}, []);

Dot forget to wrap your application in the NavigationEventProvider provider

import NavigationEventProvider from '@contexts/NavigationEventContext';

function Providers({ children }: PropsWithChildren) {
  return (
    <NavigationEventProvider>{children}</NavigationEventProvider>
  )
}

[jlucaso1]

Can this block the user when the function is asynchronous? For example, when the user tries to leave the page, will it show and wait for a confirmation modal to save things before proceeding?

[chrisBas]

@jlucaso1 please see my message below; this might help.

[chrisBas]

For anyone who needs a means to intercept the old 'routeChangeStart' events; this is a hook I came up with.

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { v4 as uuid } from 'uuid';

const CALLBACK_BY_LISTENER: { [id: string]: (acceptAction: () => void) => void } = {};
function acceptActionWhenReady(acceptAction: () => void) {
  const listeners = Object.values(CALLBACK_BY_LISTENER);
  if (listeners.length == 0) {
    acceptAction();
  } else {
    listeners.forEach((listener) => {
      listener(acceptAction);
    });
  }
}
function addListener(callback: (acceptAction: () => void) => void): string {
  const id = uuid();
  CALLBACK_BY_LISTENER[id] = callback;
  return id;
}
function removeListener(id: string): void {
  delete CALLBACK_BY_LISTENER[id];
}

interface AppRouterResponse {
  push: (route: string) => void;
  acceptAction: (() => void) | undefined;
}

/**
 * @param shouldWarn if true, the component will be subscribed to the router push event before navigation.
 * @returns a push function (like next's useRouter().push) and an acceptAction function that the subscribing function can call when ready to navigate.
 */
export default function useAppRouter(shouldWarn?: boolean): AppRouterResponse {
  const [{ acceptAction }, setAcceptAction] = useState<{ acceptAction?: () => void }>({ acceptAction: undefined });
  const { push } = useRouter();

  useEffect(() => {
    if (shouldWarn) {
      const id = addListener((acceptAction) => {
        setAcceptAction({ acceptAction });
      });
      return () => {
        removeListener(id);
      };
    }
  }, [shouldWarn]);

  return {
    push: (route: string) => {
      acceptActionWhenReady(() => {
        push(route);
      });
    },
    acceptAction,
  };
}

It can be used as such:

export function HomeButton() {
  const {push} = useAppRouter();
  
  return <button onClick={() => {push('/home')}}>Home</button>
}
export function PreventNavModal(preventNav: boolean) {
  const {acceptAction} = useAppRouter(preventNav);
  
  return <Modal open={acceptAction != undefined}><button onClick={() => acceptAction()}>Continue</button></Modal>
}

[suparerkk]

is it work with browser navigation? (eg. back and forward button / gesture)

[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

[DIEGOHORVATTI]

Perhaps this could be of some help #42016 (reply in thread)

Good luck with lib

[samuhmatos]

Thank you very much! I will make my best!

[icewind]

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

For me it does. Without events we can not call the router fully functional and production ready. Regardless of the number of chunks, each view has URL and it makes sense to fire routeChangeStart before the view will change URL routeChangeComplete after the last chunk of the new view has been loaded. Maybe we can have intermediate events like chunkLoadStart and chunkLoadComplete with some information about a particular chunk and a total number of chunks (so we can show a progress bar).

It is absolutely critical functionality to prevent customer data loss and significantly improve user experience. And for now there is literally no good way to do this. I don't have much time for this at the moment, and that is why it is even more annoying. That was working and become broken. This hook let's control unload event and clicks on anchors and back button.

import { useTranslations } from 'next-intl';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

// TODO: Implement this hook properly if we have any other option like router events
// or interceptors

const clickType = typeof document !== 'undefined' && document.ontouchstart ? 'touchstart' : 'click';

interface GuardEventListener {
  onBeforeUnload: () => boolean;
}

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

  const t = useTranslations('studio');
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const listener: GuardEventListener = {
    onBeforeUnload: () => false,
  };

  const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
    listener.onBeforeUnload() && event.preventDefault();
  };

  const clickHandler = (event: MouseEvent | TouchEvent) => {
    if ((event as MouseEvent).button || event.which !== 1) return;
    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;

    const target = event.target as HTMLElement;
    if (target.tagName !== 'A') {
      return;
    }

    const newPath = target.getAttribute('href');
    if (newPath && newPath !== window.location.pathname && listener.onBeforeUnload()) {
      event.preventDefault();
      // NOTE: There is an option to show standard beforeunload dialog here by
      // actually assigning window.location.href to newPath. That will be more
      // consistent, but will cause full page reload in case of the user decides to
      // go back.
      // window.location.href = newPath; // This will show the standard dialog
      if (confirm(t('dialogs.unsaved.title'))) {
        router.push(newPath);
      }
    }
  };

  const popStateHandler = (event: PopStateEvent) => {
    if (event.state !== null) {
      return;
    }
    if (listener.onBeforeUnload() && confirm(t('dialogs.unsaved.title'))) {
      window.removeEventListener('popstate', popStateHandler);
      history.back();
      return;
    }
    // Returning to the fake history state
    history.go(1);
  };

  useEffect(() => {
    // Since 'popstate' fires at the end of the page swap, there is no option to
    // cancel it. So we're adding artificial state and in case we got there,
    // it means a user pressed back button.
    // TODO: Check if it is safe to add these to deps so the effect will re-run with pathname and params change
    history.pushState(null, '', pathname + searchParams.toString());
    window.addEventListener('beforeunload', beforeUnloadHandler);
    window.addEventListener('popstate', popStateHandler);
    window.document.addEventListener(clickType, clickHandler, { capture: true });
    return () => {
      window.removeEventListener('popstate', popStateHandler);
      window.removeEventListener('beforeunload', beforeUnloadHandler);
      window.document.removeEventListener(clickType, clickHandler, { capture: true });
    };
  });

  return listener;
}

it can be used like this

const listener = usePageUnloadGuard();
listener.onBeforeUnload = () => !!someCondition;

[UPDATE]: Added a code to handle back button

[cgfeel]

Intercept route changes at the NextJS app router mode

Demo：[codeSondbox]

cf6e2e9c42a4f29b1dacadffb58c9a1f_723815601830_v_1702122801840414.mp4

source code: https://github.com/cgfeel/next.v2/tree/master/routing-file/src/app/leaving/proxy

Use this Provider in your layout at the app root directory：https://github.com/cgfeel/next.v2/blob/master/routing-file/src/components/proxyProvider/index.tsx

'use client'

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { FC, PropsWithChildren, createContext, useEffect, useState } from "react";

const ProxyContext = createContext<ProxyInstance>([undefined, () => {}]);

const ProxyProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
    const [tips, setTips] = useState<string|undefined>();
    const msg = tips === undefined ? tips : (tips||'Are you sure want to leave this page?');

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

    const url = [pathname, searchParams].filter(i => i).join('?');
    useEffect(() => {
        setTips(undefined);
    }, [url, setTips]);

    useEffect(() => {
        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            if (msg === undefined) return msg;
            
            event.preventDefault();
            event.returnValue = msg;
            
            return msg;
        };

        const script = document.getElementById('proxy-script');
        if (script) {
            script.dataset.msg = msg||'';
            script.dataset.href = location.href;
        }

        window.addEventListener("beforeunload", handleBeforeUnload);
        return () => {
            window.removeEventListener("beforeunload", handleBeforeUnload);
        }
    }, [msg]);

    return (
        <ProxyContext.Provider
            value={[msg, setTips]}
        >
            <Script
                strategy="afterInteractive"
                id="proxy-script"
                dangerouslySetInnerHTML={{
                    __html: `(() => {
                        const originalPushState = history.pushState.bind(history);
                        let currentPoint = 0;
                        let point = 0;
                        window.history.pushState = function(state, title, url) {
                            state.point = ++point;
                            currentPoint = point;
                            originalPushState(state, title, url);
                        };
                        const originalReplaceState = history.replaceState.bind(history);
                        window.history.replaceState = function(state, title, url) {
                            state.point = currentPoint;
                            originalReplaceState(state, title, url);
                        };
                        window.addEventListener('popstate', function (event) {
                            const { state: nextState } = event;
                            const isback = currentPoint > nextState.point;

                            currentPoint = nextState.point;

                            const script = document.getElementById('proxy-script');
                            if (!script || location.href === script.dataset.href) return;

                            const msg = script.dataset.msg||'';
                            const confirm = msg == '' ? true : window.confirm(msg);
                            if (!confirm) {
                                event.stopImmediatePropagation();
                                isback ? history.forward() : history.back();
                            }
                        });
                    })()`,
                }}
            ></Script>
            {children}
        </ProxyContext.Provider>
    );
};

export type ProxyInstance = [
    string|undefined, (tips?: string) => void
]

export { ProxyContext };

export default ProxyProvider;

[gerkim62]

"use client";
import { ComponentProps, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

type CustomLinkProps = ComponentProps;

const CustomLink: React.FC = ({ children, href, ...rest }) => {
const pathname = usePathname();

useEffect(() => {
console.log(pathname changed so hiding the loader: ${pathname});
NProgress.done();
}, [pathname]);

const handleClick = () => {
// this is not comprehensive but it's a good start, you can add more conditions if needed
const wontNavigate = pathname === href || href.toString().startsWith("#");

NProgress.start();
if (wontNavigate) {
  console.log(`wontNavigate is true so hiding the loader: ${href}`);

  return NProgress.done();
}

};

return (
<>
<Link {...rest} href={href} onClick={handleClick}>
{children}

</>
);
};

export default CustomLink;

[rickyviz]

any solution for this?

i want trigger function before ,close, refresh,

  useEffect(() => {
    const handleUnload = (event) => {
      console.log("run it close or reload or go to another page");
      if (
        submitted &&
        checkoutState.selected_payment_method.method === "credit_card"
      ) {
        dispatchCheckout({
          type: "RESET_STATE",
        });

        dispatchCart({
          type: "FETCH_CART",
          payload: dispatchCart,
        });
      } else {
        dispatchCart({
          type: "FETCH_CART",
          payload: dispatchCart,
        });
      }
    };

    const beforeUnloadHandler = (event) => {
      handleUnload(event);
    };

    window.addEventListener("beforeunload", beforeUnloadHandler);

    return () => {
      window.removeEventListener("beforeunload", beforeUnloadHandler);

    };

it not fire when click to another page, any solution without router.events ?

[bilalmohib]

@leerob Please can you add router events for NextJS if this package is able to use Router events please can you add to core NextJS
: https://github.com/joulev/nextjs13-appdir-router-events

@leerob I can assure you that We need NextJS router events any way.

There is no other suitable alternative for that. Please add this to native NextJS Library

[damyco]

I'm struggling with this too at the moment, In pages router I could simply use events and on navigating away I was able to save my order to session storage. Now this seems to be impossible to do. Anyone has any suggestions? Should I instead save it to 'global state'? What are my options without router.events

    useEffect(() => {
        const handleRouteChange = () => {
             setSession(); // save everything to session storage
             setIsFullHireSelected(false); // switch the state of my component
        };

        router.events.on('beforeHistoryChange', handleRouteChange);

        return () => {
            router.events.off('beforeHistoryChange', handleRouteChange);
        };
    }, [order]);

   

[jdevcc]

For those looking to add a progress bar during navigation, I added a helpful resource to the other events discussion: #41934 (comment)

Hi everyone, if you're looking to add a progress bar in the app dir, this blog post is helpful: https://buildui.com/posts/global-progress-in-nextjs

Just to be clear - creating a wrapper around the Link component that reimplements router navigation is a hacky solution in my book. I believe Next.js should expose a boolean for pending navigations. More in my previous comment.

[LuisanSuarez]

For those still looking for a solution, you can edit the NavigationEvents component shown in the docs to modify the router.push method.

"use client";

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

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

  useEffect(() => {
    const _push = router.push.bind(router);

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

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

  return null;
}

[ganeshapmb]

I did this . It worked in most of the link tags. I created a LoadingBar Component that I imported in layout.js Here I am calling a loader
on the basis of progress
` useEffect(() => {
const handleLinkClick = (event) => {
// Check if the clicked element is a Link tag
if (event.target.tagName === 'A') {
// Track the click event here
setProgress(40)
// alert("meet")
}
};

// Add event listener to the document for mouseup event
document.addEventListener('mouseup', handleLinkClick);

// Cleanup function
return () => {
  // Remove event listener when component unmounts
  document.removeEventListener('mouseup', handleLinkClick);
};

}, []); `

I hope this works.

[leerob]

I'm going to combine this Discussion with a duplicate here: #41934 (comment)

We just posted a longer message there with some solutions!