React Router标签页切换时表单数据持久化问题（无需Redux）

Hey there! I’ve dealt with this exact problem before when building tabbed workflows with React Router—losing form data when navigating back is super frustrating, and you don’t need Redux to fix it. Let’s go through a few practical solutions:

1. Keep TabX Mounted (Prevent Unmount on Route Change) #

The root issue here is that React Router unmounts components when you navigate away from their route, wiping out all local state. If you keep TabX mounted (just hidden) instead of unmounting it, your form data stays intact.

You can do this by wrapping both tabs in a parent component that conditionally renders them based on the current route, rather than relying on <Routes> to handle mounting/unmounting:

import { useLocation } from 'react-router-dom';
import TabX from './TabX';
import TabY from './TabY';

function TabContainer() {
  const location = useLocation();

  return (
    <div className="tab-wrapper">
      {/* Add your tab navigation buttons here if needed */}
      <div className="tab-content">
        {location.pathname === '/tab-x' && <TabX />}
        {location.pathname === '/tab-y' && <TabY />}
      </div>
    </div>
  );
}

Pros: No extra state management needed, data persists perfectly without any workarounds.
Cons: If TabX is a heavy component, keeping it mounted might use slightly more memory—this is negligible for most form use cases though.

2. Persist Form State to Session Storage #

If you need TabX to unmount (for performance or other reasons), you can save the form data to browser session storage whenever it changes, then load it back when the component mounts.

Here’s how to implement this:

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function TabX() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const navigate = useNavigate();

  // Load saved data from sessionStorage when the component mounts
  useEffect(() => {
    const savedData = sessionStorage.getItem('tabXFormState');
    if (savedData) {
      setFormData(JSON.parse(savedData));
    }
  }, []);

  // Save data to sessionStorage every time the form updates
  useEffect(() => {
    sessionStorage.setItem('tabXFormState', JSON.stringify(formData));
  }, [formData]);

  const handleNext = () => {
    // Optional: Clear storage if you don't want data to persist after completing the flow
    // sessionStorage.removeItem('tabXFormState');
    navigate('/tab-y', { formData }); // Still pass data to TabY if needed
  };

  const handleInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <form>
      <input
        name="name"
        value={formData.name}
        onChange={handleInputChange}
        placeholder="Your Name"
      />
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleInputChange}
        placeholder="Your Email"
      />
      <button type="button" onClick={handleNext}>Next</button>
    </form>
  );
}

Pros: Works even if the component unmounts, data persists until the browser tab is closed.
Cons: Requires handling storage cleanup to avoid loading old data for future visits.

3. Lift Form State to a Parent Component #

If TabX and TabY share a common parent component, you can lift the form state up to that parent. Since the parent doesn’t unmount when routes change, the state stays safe and accessible to both tabs.

Parent Component: #

import { useState } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import TabX from './TabX';
import TabY from './TabY';

function TabWorkflowContainer() {
  const [tabXFormData, setTabXFormData] = useState({ name: '', email: '' });
  const navigate = useNavigate();

  const handleNavigateToTabY = () => {
    navigate('/tab-y');
  };

  return (
    <div>
      <Routes>
        <Route
          path="/tab-x"
          element={
            <TabX
              formData={tabXFormData}
              updateFormData={setTabXFormData}
              onNext={handleNavigateToTabY}
            />
          }
        />
        <Route path="/tab-y" element={<TabY submittedData={tabXFormData} />} />
      </Routes>
    </div>
  );
}

TabX Component (now a controlled component): #

function TabX({ formData, updateFormData, onNext }) {
  const handleInputChange = (e) => {
    updateFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <form>
      <input
        name="name"
        value={formData.name}
        onChange={handleInputChange}
        placeholder="Your Name"
      />
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleInputChange}
        placeholder="Your Email"
      />
      <button type="button" onClick={onNext}>Next</button>
    </form>
  );
}

Pros: Clean, React-native approach, makes it easy to share form data with TabY or other components.
Cons: Requires restructuring your component hierarchy if tabs don’t already have a common parent.

All these solutions work perfectly without Redux. Pick the one that fits your workflow best—keeping TabX mounted is usually the simplest fix, while session storage or state lifting are great for more complex scenarios.

内容的提问来源于stack exchange，提问作者Geek_To_Learn