组件卸载后保留Auth状态：无需全局状态管理实现路由切换表单值留存

当然有！不用Redux这类全局状态库，咱们有几个简单又实用的方法来实现这个需求，下面一个个给你拆解：

1. 状态提升到共享父组件 #

这是React最经典的状态管理思路之一。既然/login和/signup路由都渲染同一个Auth组件，你可以把表单状态移到这两个路由的共同父组件里（比如App组件或者专门的AuthContainer组件）。父组件不会随路由切换卸载，状态自然就能留存下来。

举个简单的实现例子：

// 父组件（比如App.js）
import { useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import Auth from './Auth';

function App() {
  // 在父组件维护表单状态
  const [formState, setFormState] = useState({
    email: '',
    password: '',
    confirmPassword: ''
  });

  return (
    <Routes>
      <Route path="/login" element={<Auth isSignup={false} formState={formState} setFormState={setFormState} />} />
      <Route path="/signup" element={<Auth isSignup={true} formState={formState} setFormState={setFormState} />} />
    </Routes>
  );
}

// Auth组件直接使用父组件传递的状态
function Auth({ isSignup, formState, setFormState }) {
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormState(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      <input
        name="email"
        value={formState.email}
        onChange={handleInputChange}
        placeholder="邮箱"
      />
      <input
        name="password"
        type="password"
        value={formState.password}
        onChange={handleInputChange}
        placeholder="密码"
      />
      {isSignup && (
        <input
          name="confirmPassword"
          type="password"
          value={formState.confirmPassword}
          onChange={handleInputChange}
          placeholder="确认密码"
        />
      )}
      {/* 登录/注册按钮逻辑 */}
    </form>
  );
}

2. 使用sessionStorage持久化状态 #

如果希望状态在页面刷新后也能保留，或者不想依赖父组件，可以把表单状态存在浏览器的sessionStorage中（注意：绝对不要把密码这类敏感信息存在localStorage，它是持久化存储且易被XSS攻击窃取，sessionStorage会在关闭标签页时自动清除，安全性更高）。

你可以封装一个自定义Hook来复用这个逻辑：

// 自定义Hook：useSessionStorageState
import { useState, useEffect } from 'react';

function useSessionStorageState(key, initialValue) {
  // 初始化时从sessionStorage读取状态
  const [state, setState] = useState(() => {
    const storedValue = sessionStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  // 状态变化时同步到sessionStorage
  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

// 在Auth组件中使用
function Auth({ isSignup }) {
  const [formState, setFormState] = useSessionStorageState('authFormState', {
    email: '',
    password: '',
    confirmPassword: ''
  });

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

  // 组件卸载后状态仍存在sessionStorage中，下次挂载自动读取
  return (
    {/* 表单内容 */}
  );
}

3. 用React Router的Location State临时传递（不推荐存敏感数据） #

如果只是临时在路由切换时传递状态，不想持久化，可以用React Router的location.state。但这个方法有个明显缺点：用户刷新页面后，location.state会丢失，而且同样不适合存储密码这类敏感内容，仅适合非敏感的临时数据。

简单实现示例：

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

function Auth({ isSignup }) {
  const navigate = useNavigate();
  const location = useLocation();
  const [formState, setFormState] = useState({
    email: '',
    password: '',
    confirmPassword: ''
  });

  // 组件挂载时读取路由携带的状态
  useEffect(() => {
    if (location.state?.formState) {
      setFormState(location.state.formState);
    }
  }, [location.state]);

  // 切换路由时携带当前表单状态
  const switchAuthMode = () => {
    navigate(isSignup ? '/login' : '/signup', {
      state: { formState }
    });
  };

  // ...其他输入处理逻辑
  return (
    <div>
      {/* 表单内容 */}
      <button onClick={switchAuthMode}>
        {isSignup ? '已有账号？去登录' : '没有账号？去注册'}
      </button>
    </div>
  );
}

总结来说，最推荐的是状态提升到父组件（适合不需要持久化的场景）或者自定义Hook结合sessionStorage（适合需要持久化的场景），这两种方案完全依托React本身的特性，不需要任何全局状态管理库就能完美解决你的需求。

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