Check changes before routing in React / Next js

Question

I am having a Next JS app where there are very simple two pages.

-> Home page

import Header from "../components/header";

const handleForm = () => {
  console.log("trigger");
};

export default () => (
  <>
    <Header />
    <h1>Home</h1>
    <form onSubmit={handleForm}>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      <button type="submit"> Login </button>
    </form>
  </>
);

-> About page

import Header from "../components/header";
export default () => (
  <>
    <Header />
    <h1>About us</h1>
  </>
);

Requirement:

-> Home page has a login form

-> If user started typing in any of the fields then without submitting the form, if he tries to move to About us page then a warning needs to be displayed something similar like beforeunload_event .

I am not sure how we can handle it in react as I am new to it.. Kindly please help me to handle a alert if user trying to navigate to other url while editing the form fields..

Answer 1

From my understanding, you can achieve your goal by listen the event routeChangeStart as then throws exception in case of rejecting to move the target url.

I forked above codesandbox and created a simple demo based on your idea which doesn't allow to switch page in case of username having value (form is dirty).

Here is the general idea:

import router from "next/router";

export default () => {
  // Assume this value holds the status of your form
  const [dirty, setDirty] = React.useState();

  // We need to ref to it then we can access to it properly in callback properly
  const ref = React.useRef(dirty);
  ref.current = dirty;

  React.useEffect(() => {
    // We listen to this event to determine whether to redirect or not
    router.events.on("routeChangeStart", handleRouteChange);

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

  const handleRouteChange = (url) => {
    console.log("App is changing to: ", url, ref.current);
    
    // In this case we don't allow to go target path like this
    // we can show modal to tell user here as well
    if (ref.current) {
      throw Error("stop redirect since form is dirty");
    }
  };

  return (
    // ...
  )

}

The link codesandbox is here https://codesandbox.io/s/react-spring-nextjs-routes-forked-sq7uj