React提交表单后跨页传递字段的最优方案及其他可行方式咨询

官方推荐方案：Route State（React Router） #

React官方结合React Router的场景下，Route State是最推荐的轻量跨页传参方式。它专门为路由跳转时的临时状态传递设计：

• 状态和路由跳转行为强绑定，不会污染全局上下文
• 实现简单，不需要额外依赖
• 完美匹配“提交成功后跳转展示临时信息”的场景

示例代码：

// 表单页面提交后跳转
import { useNavigate } from 'react-router-dom';

const FormPage = () => {
  const navigate = useNavigate();
  const handleSubmit = async (formData) => {
    // 调用API提交逻辑
    await submitToAPI(formData);
    // 用route state传递标题
    navigate('/success', { state: { title: formData.title } });
  };
};

// 成功页面获取状态
import { useLocation } from 'react-router-dom';

const SuccessPage = () => {
  const location = useLocation();
  const submittedTitle = location.state?.title;
  return <div>提交成功！标题：{submittedTitle}</div>;
};

注意：如果用户手动刷新成功页面，route state会丢失（浏览器刷新不会保留React Router的内存状态），若需支持刷新后仍显示，可搭配其他方案。

其他可选实现方式 #

1. URL查询参数（Query Params） #

把标题编码后放在URL的查询参数中，适合需要支持页面刷新的场景：

// 表单页面跳转
navigate(`/success?title=${encodeURIComponent(formData.title)}`);

// 成功页面获取
import { useSearchParams } from 'react-router-dom';

const SuccessPage = () => {
  const [searchParams] = useSearchParams();
  const submittedTitle = decodeURIComponent(searchParams.get('title') || '');
  return <div>提交成功！标题：{submittedTitle}</div>;
};

优点：页面刷新后参数不会丢失；缺点：标题含特殊字符时需编码解码，URL长度有限制（不适合超长标题）。

2. 本地存储（LocalStorage/SessionStorage） #

提交成功后将标题存入本地存储，成功页面读取后立即删除（避免后续进入页面重复显示）：

// 表单页面提交后
await submitToAPI(formData);
localStorage.setItem('submittedFormTitle', formData.title);
navigate('/success');

// 成功页面
const SuccessPage = () => {
  const [title, setTitle] = useState('');
  
  useEffect(() => {
    const savedTitle = localStorage.getItem('submittedFormTitle');
    if (savedTitle) {
      setTitle(savedTitle);
      localStorage.removeItem('submittedFormTitle'); // 读取后清理
    }
  }, []);
  
  return <div>提交成功！标题：{title}</div>;
};

优点：持久化存储，刷新不丢；缺点：属于全局存储，多标签页场景可能出现冲突，需注意清理逻辑。

3. 全局状态管理库（如Redux/Zustand） #

如果项目已使用全局状态管理工具，可将提交的标题存入全局store，成功页面直接读取：

// 用Zustand示例
import create from 'zustand';

const useStore = create((set) => ({
  submittedTitle: '',
  setSubmittedTitle: (title) => set({ submittedTitle: title }),
}));

// 表单页面
const handleSubmit = async (formData) => {
  await submitToAPI(formData);
  useStore.getState().setSubmittedTitle(formData.title);
  navigate('/success');
};

// 成功页面
const SuccessPage = () => {
  const submittedTitle = useStore((state) => state.submittedTitle);
  return <div>提交成功！标题：{submittedTitle}</div>;
};

优点：适合复杂状态共享场景；缺点：小场景下引入全局状态冗余，没必要为单个参数增加复杂度。

选型总结 #

• 优先选Route State：符合React Router设计理念，轻量无冗余，是官方推荐的临时路由跳转传参方式；
• 需支持页面刷新：用URL查询参数（标题短且无特殊字符时）或本地存储（需要持久化时）；
• 全局状态管理：仅当项目已有全局状态，且需在多个组件共享该信息时考虑。

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