在多步表单场景中，需持久化一个非会话、非 url 参数的全局状态（如 `formid`），react router 的 `location.state` 不适合长期存储，relay 也不适用于本地 ui 状态管理；推荐使用轻量、可控的 context api 实现跨组件、跨路由的状态共享与访问。
当构建类似五步表单的应用时，核心挑战在于：formId 仅在第二步提交成功后生成，却需在后续所有步骤（Step 3–5）中可靠读取和使用——它不属于路由参数（避免暴露在 URL 中），也不依赖服务端会话，更不是 GraphQL 查询结果（Relay 专用于数据获取/缓存，不替代本地状态容器）。此时，混用 useState（局部）、location.state（临时跳转载荷）或 Relay updater（副作用驱动的数据同步）都会导致状态不可靠、难以追踪或违反关注点分离原则。
✅ 最佳实践：采用 React Context API 封装专用状态上下文
Context 提供了低侵入、可组合、可测试的状态分发机制，天然适配“一次设置、多处消费”的流程型场景。以下为推荐实现：
// FormIdContext.tsx
import React, { createContext, useState, useContext, ReactNode } from 'react';
interface FormIdContextType {
formId: string | null;
setFormId: (id: string | null) => void;
}
const FormIdContext = createContext<FormIdContextType | undefined>(undefined);
export const useFormIdContext = (): FormIdContextType => {
const context = useContext(FormIdContext);
if (!context) {
throw new Error('useFormIdContext must be used within a FormIdContext.Provider');
}
return context;
};
export const FormIdProvider = ({ children }: { children: ReactNode }) => {
const [formId, setFormId] = useState<string | null>(null);
return (
<FormIdContext.Provider value={{ formId, setFormId }}>
{children}
</FormIdContext.Provider>
);
};在应用根部（如 App.tsx）包裹 Router 并提供 Context：
// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { FormIdProvider } from './FormIdContext';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
function App() {
return (
<Router>
<FormIdProvider>
<Switch>
<Route exact path="/step1" component={Step1} />
<Route exact path="/step2" component={Step2} />
<Route exact path="/step3" component={Step3} />
{/* 其他步骤... */}
</Switch>
</FormIdProvider>
</Router>
);
}
export default App;各步骤组件通过自定义 Hook 安全读写状态：
// Step2.tsx（生成 formId）
import { useFormIdContext } from './FormIdContext';
import { useHistory } from 'react-router-dom';
function Step2() {
const { setFormId } = useFormIdContext();
const history = useHistory();
const handleSubmit = async () => {
const id = await submitFormAndGetId(); // 模拟异步请求
setFormId(id); // ✅ 状态立即更新，所有订阅组件重渲染
history.push('/step3');
};
return <button onClick={handleSubmit}>Submit & Proceed</button>;
}// Step3.tsx（消费 formId）
import { useFormIdContext } from './FormIdContext';
function Step3() {
const { formId } = useFormIdContext();
// 关键防护：无 formId 时强制跳转回起点
if (!formId) {
// 可配合 useEffect + navigate 实现重定向
return <div>Please start from Step 1.</div>;
}
return (
<form>
<input type="hidden" name="formId" value={formId} />
<p>Working with form ID: {formId}</p>
</form>
);
}⚠️ 注意事项与进阶建议
- 不要用 location.state 替代状态管理：它仅在导航瞬间有效，刷新页面即丢失，且无法触发组件响应式更新；
- 避免滥用 Relay 管理本地状态：Relay 的 updater 用于同步 GraphQL 响应到缓存，而非维护 UI 生命周期状态；
- 考虑持久化增强（可选）：若需页面刷新后保留 formId，可在 setFormId 中同步写入 localStorage，并在 Provider 初始化时读取；
- 规模化时升级方案：当状态逻辑复杂（如多表单并行、撤销/重做），可结合 Zustand 或 Jotai 替代 Context，但对本例而言，原生 Context 已足够简洁高效。
总结：Context 是 React 生态中管理跨层级、跨路由 UI 状态的黄金标准。它明确划分了状态所有权（由 Provider 统一控制）、消除了 prop-drilling、支持类型安全，并与 React Router 和 Relay 完美共存——前者负责导航，后者负责数据获取，Context 专注状态协调。
