What is the best way to handle user refreshing Wizard route based forms?

[EduardoAC]

The usage of the Wizard form has changed over the years. Instead of using a form component to orchestrate the different steps, it is now more likely to use URLs and routers to define the steps.

This presents an obvious problem: we need to redirect the user at the beginning of the journey as part of the form that needs to be filled out. Currently, our best approach to generalise this is using outlet and putting a small fragment of logic within the react-router-dom to handle this.

  useBeforeUnload(
    useCallback(() => {
      // Store the information about the fact the page is refreshed (refreshed or closed)
      sessionStorage.setItem("isFormFlowReloaded", "true");
    }, []),
  );

  // Check if the page has been refreshed
  if (
    sessionStorage.getItem("isFormFlowReloaded") === "true" &&
    location.pathname !== "/step1"
  ) {
    // If the page was refreshed, redirect to the homepage
    sessionStorage.removeItem("isFormFlowReloaded");
    window.location.href = "/step1";
    return null;
  }
  // Clear flag if we are in the homepage
  if (sessionStorage.getItem("isFormFlowReloaded") === "true") {
    sessionStorage.removeItem("isFormFlowReloaded");
  }

Which is a flaw. If the user lands on any pages, it won't be redirected with the code described above.

So, two questions pop into my mind

• Is the route-based Wizard form the best approach considering the deficiencies?
• Is there anything I am missing from the documentation on Wizard form that can help us overcome this issue?

I would appreciate your thoughts on this common challenge of building forms using URLs. Perhaps you could guide me towards a solution or share some ideas on how React Hook Form might help address it.