How can you implement multi-step forms with route-based navigation in React Router

Question

Can you tell me How can you implement multi-step forms with route-based navigation in React Router?

Answer 1

To implement a multi-step form where each step has its own route (e.g., /form/step1, /form/step2), follow these steps:

1. Define Routes for Each Step

// App.js (React Router v6)

import { Routes, Route } from 'react-router-dom';

function App() {

  return (

    <Routes>

      <Route path="/form/step1" element={<Step1 />} />

      <Route path="/form/step2" element={<Step2 />} />

      <Route path="/form/step3" element={<Step3 />} />

    </Routes>

  );

}

2. Navigate Between Steps

Use useNavigate (v6) or history.push (v5) to move between steps.

// Step1.js (React Router v6)

import { useNavigate } from 'react-router-dom';

function Step1() {

  const navigate = useNavigate();

  const goToNextStep = () => {

    navigate("/form/step2"); // Move to Step 2

  };

  return (

    <div>

      <h1>Step 1</h1>

      <button onClick={goToNextStep}>Next</button>

    </div>

  );

}

3. Share Form Data Between Steps

Use React Context, Redux, or state management (like useState in a parent component).

4. Final Submission

On the last step, submit all collected data.

// Step3.js

function Step3({ formData, onSubmit }) {

  return (

    <div>

      <h1>Review & Submit</h1>

      <button onClick={onSubmit}>Submit</button>

    </div>

  );

}