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..

tmhao2005 · Accepted Answer · 2020-11-19 16:20:33Z

2

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

answered Nov 19, 2020 at 16:20

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Undefined Over a year ago

Thanks for your solution.. And I am happy you have modified my code with needed functionalities.. One important thing I would like to know from here is that whether it is possible to check form dirty intead of each input fields? Because in my real app I have 50 input fields and if any of the 1 out 50 inputs is changed then that needs to be considered as dirty..

tmhao2005 Over a year ago

In most cases checking form dirty is always a good way to go for ;) you could use some lib which deals with form pretty well like Formik

Undefined Over a year ago

You have assigned to Username input alone, but if I want to implement in my app, then I need to copy paste the same code for all 50 fields.. So is there a way to check if a form is dirty? If so feel free to modify the solution..

tmhao2005 Over a year ago

Do you know about Formik which offers outstanding features as working with form. It helps you to detect a form dirty or not with ease

Undefined Over a year ago

Sorry I am not supposed to use any external form libraries.. I am in the need to achieve it in normal form way..

|

Collectives™ on Stack Overflow

Check changes before routing in React / Next js

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related