Want to have an event handler for the browser’s back button with next.js

by

You can use next/router‘s beforePopState to act on changes to the session history navigation (back/forward actions), and make sure it’ll only happen when leaving the current page.

useEffect(() => {
    router.beforePopState(({ as }) => {
        if (as !== router.asPath) {
            // Will run when leaving the current page; on back/forward actions
            // Add your logic here, like toggling the modal state
        }
        return true;
    });

    return () => {
        router.beforePopState(() => true);
    };
}, [router]); // Add any state variables to dependencies array if needed.

More Related Contents:

  1. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  2. unable to deploy next js to azure
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  5. Window is not defined in Next.js React app
  6. Is it safe to store a JWT in localStorage with ReactJS?
  7. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  8. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  9. How to add custom html attributes in JSX
  10. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  11. Warning: Function components cannot be given refs
  12. ‘react-scripts’ is not recognized as an internal or external command
  13. useEffect does not listen for localStorage
  14. How do you import a javascript package from a cdn/script tag in React?
  15. Environment variables not working (Next.JS 9.4.4)
  16. Next.js context provider wrapping App component with page specific layout component giving undefined data
  17. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  18. React.js Serverside rendering and Event Handlers
  19. Increase JavaScript Heap size in create-react-app project
  20. Webpack 5 – Uncaught ReferenceError: process is not defined
  21. Next.js: Error: React.Children.only expected to receive a single React element child
  22. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  23. ReactJS server-side rendering vs client-side rendering
  24. How to deploy a React + NodeJS Express application to AWS?
  25. how can I use top level “await” in typescript next.js
  26. Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/
  27. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. Next.js, getStaticProps not working with component but does with page

Leave a Comment