使用React、React Router、React Relay，该如何存储全局formId状态？

针对你这个跨步骤表单的formId全局管理需求，结合你正在用的React、React Router、Relay，给你几个实用方案，对比优缺点后选适合你的：

方案1：React Context + 可选持久化（推荐，无额外依赖） #

React Context是原生的全局状态管理方案，专门解决这种跨组件/路由共享状态的问题，还能配合sessionStorage防止页面刷新丢失formId。

实现步骤： #

1. 创建FormId上下文，封装formId的读写逻辑：

// FormIdContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const FormIdContext = createContext();

export function FormIdProvider({ children }) {
  // 初始化时从sessionStorage读取，避免刷新丢失
  const [formId, setFormId] = useState(() => sessionStorage.getItem('formId'));

  // 同步状态到sessionStorage
  useEffect(() => {
    formId ? sessionStorage.setItem('formId', formId) : sessionStorage.removeItem('formId');
  }, [formId]);

  return (
    <FormIdContext.Provider value={{ formId, setFormId }}>
      {children}
    </FormIdContext.Provider>
  );
}

// 自定义Hook，简化上下文调用
export function useFormId() {
  return useContext(FormIdContext);
}

2. 写路由守卫组件，拦截无formId的访问：

// ProtectedStep.js
import { Navigate } from 'react-router-dom';
import { useFormId } from './FormIdContext';

export function ProtectedStep({ children }) {
  const { formId } = useFormId();
  // 无formId直接跳转到第一步
  if (!formId) return <Navigate to="/step/1" replace />;
  return children;
}

3. 在根组件中引入Provider，并给需要formId的路由加守卫：

// App.js
import { Routes, Route, Navigate } from 'react-router-dom';
import { FormIdProvider } from './FormIdContext';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import Step4 from './Step4';
import Step5 from './Step5';
import { ProtectedStep } from './ProtectedStep';

function App() {
  return (
    <FormIdProvider>
      <Routes>
        <Route path="/step/1" element={<Step1 />} />
        <Route path="/step/2" element={<Step2 />} />
        {/* 步骤3-5需要formId，用ProtectedStep包裹 */}
        <Route path="/step/3" element={<ProtectedStep><Step3 /></ProtectedStep>} />
        <Route path="/step/4" element={<ProtectedStep><Step4 /></ProtectedStep>} />
        <Route path="/step/5" element={<ProtectedStep><Step5 /></ProtectedStep>} />
        <Route path="*" element={<Navigate to="/step/1" replace />} />
      </Routes>
    </FormIdProvider>
  );
}

4. 在Step2中设置formId：

// Step2.js
import { useFormId } from './FormIdContext';
import { useNavigate } from 'react-router-dom';

function Step2() {
  const { setFormId } = useFormId();
  const navigate = useNavigate();

  const handleSubmit = async () => {
    // 模拟提交请求获取formId
    const res = await fetch('/api/submit-step2', { method: 'POST', body: JSON.stringify({/* 表单数据 */}) });
    const { formId } = await res.json();
    
    setFormId(formId);
    navigate('/step/3');
  };

  return <button onClick={handleSubmit}>提交进入步骤3</button>;
}

优点： #

• React原生方案，无需额外依赖
• 全局任意组件可通过useFormId()直接获取，不用手动传递
• 配合sessionStorage解决刷新丢失问题
• 路由守卫逻辑集中，易维护

方案2：React Router URL参数（适合需要分享步骤链接的场景） #

如果业务允许把formId暴露在URL中（比如支持用户分享当前表单步骤），直接用URL参数是最省心的方案，不用额外状态管理，还自带路由级别的校验。

实现步骤： #

1. 配置路由时给步骤3-5加上formId参数：

// App.js
import { Routes, Route, Navigate, useParams, useRouteError } from 'react-router-dom';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';

// 步骤3-5的Loader函数，校验formId是否存在
function stepLoader() {
  const { formId } = useParams();
  if (!formId) {
    // 抛出错误，触发errorElement
    throw new Response(null, { status: 400, statusText: 'Form ID required' });
  }
  return { formId };
}

// 错误处理组件，无formId时跳转到第一步
function StepError() {
  const error = useRouteError();
  if (error.status === 400) {
    return <Navigate to="/step/1" replace />;
  }
  return <div>加载失败，请重试</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/step/1" element={<Step1 />} />
      <Route path="/step/2" element={<Step2 />} />
      <Route path="/step/3/:formId" element={<Step3 />} loader={stepLoader} errorElement={<StepError />} />
      {/* 步骤4、5同理配置 */}
      <Route path="*" element={<Navigate to="/step/1" replace />} />
    </Routes>
  );
}

2. Step2提交后跳转时携带formId到URL：

// Step2.js
import { useNavigate } from 'react-router-dom';

function Step2() {
  const navigate = useNavigate();

  const handleSubmit = async () => {
    const res = await fetch('/api/submit-step2', { method: 'POST', body: JSON.stringify({/* 表单数据 */}) });
    const { formId } = await res.json();
    
    // 跳转到带formId的步骤3路由
    navigate(`/step/3/${formId}`);
  };

  return <button onClick={handleSubmit}>提交进入步骤3</button>;
}

3. 步骤3中通过Loader数据获取formId：

// Step3.js
import { useLoaderData } from 'react-router-dom';

function Step3() {
  const { formId } = useLoaderData();
  return <input type="hidden" name="formId" value={formId} />;
}

优点： #

• 无需额外状态管理，完全复用React Router能力
• URL携带formId，刷新页面或分享链接都能直接进入对应步骤
• 路由Loader自带校验逻辑，拦截非法访问

缺点： #

• formId会暴露在URL中，不适合敏感ID场景

方案3：Relay本地状态（适合重度依赖Relay的项目） #

如果你的项目已经深度使用Relay，可以把formId存在Relay的本地状态中，通过Relay的查询能力全局获取，和其他业务数据统一维护。

实现思路： #

1. 定义一个带@client字段的GraphQL查询，用来读取本地formId：

query FormIdQuery {
  formId @client
}

2. 在Step2提交成功后，用Relay的updater更新本地状态：

// Step2.js
import { useMutation } from 'react-relay';
import { graphql } from 'relay-runtime';
import { useNavigate } from 'react-router-dom';

const SubmitStep2Mutation = graphql`
  mutation SubmitStep2Mutation($input: Step2Input!) {
    submitStep2(input: $input) {
      formId
    }
  }
`;

function Step2() {
  const [commitMutation] = useMutation(SubmitStep2Mutation);
  const navigate = useNavigate();

  const handleSubmit = () => {
    commitMutation({
      variables: { input: {/* 表单数据 */} },
      updater: (store) => {
        // 获取提交返回的formId
        const payload = store.getRootField('submitStep2');
        const formId = payload.getValue('formId');
        
        // 更新本地状态
        const root = store.getRoot();
        root.setValue(formId, 'formId');
      },
      onCompleted: () => {
        navigate('/step/3');
      }
    });
  };

  return <button onClick={handleSubmit}>提交进入步骤3</button>;
}

3. 在需要formId的组件中查询本地状态：

// Step3.js
import { useQuery } from 'react-relay';
import { graphql } from 'relay-runtime';

const FormIdQuery = graphql`
  query Step3FormIdQuery {
    formId @client
  }
`;

function Step3() {
  const { data } = useQuery(FormIdQuery);
  return <input type="hidden" name="formId" value={data.formId} />;
}

4. 路由守卫可以结合Relay的查询结果，在组件挂载时检查formId，为空则跳转。

优点： #

• 和Relay业务数据统一管理，适合Relay重度项目
• 利用Relay的缓存机制，状态更新自动同步到所有查询组件

缺点： #

• 配置相对复杂，需要熟悉Relay本地状态API
• 轻量场景下没必要引入额外复杂度

不推荐的方案说明 #

• location.state：存在内存中，页面刷新就丢失，且每次跳转都要手动传递，容易遗漏，全局获取也不方便，确实不适合你的场景。
• window.formId：全局变量污染，无状态管理机制，调试和维护都很麻烦，完全不推荐。

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