React Router页面刷新时路由传递state丢失的最佳处理方案

首先明确问题根源：react-router 存在location.state里的参数是保存在浏览器当前页面内存中的，一旦触发页面刷新、或者用户直接手动输入路由地址进入页面，内存数据重置，自然会拿到null/undefined，没有通用的一键解决方法，根据业务场景选择对应方案即可：

方案1：将参数拼接在URL中（首推，最稳定） #

如果传递的是不敏感、可序列化的简单参数（比如页面ID、分类类型、搜索关键词这类），直接把参数放到URL路径或者查询参数里是最符合Web语义的方案，无论刷新、分享链接、新开标签页都不会丢失。

• 路径参数示例：路由配置为/page2/:prop1，跳转时pathname写为/page2/${val1}，在Page2中通过props.match.params.prop1取值
• 查询参数示例：跳转时search拼接为?prop1=val1&prop2=val2，在Page2中解析props.location.search取值即可

方案2：sessionStorage 做兜底缓存（适合不便放在URL的参数） #

如果传递的参数较大、或者属于临时状态不适合暴露在URL中，可以在跳转传参时同步把状态写入sessionStorage（注意优先选sessionStorage而非localStorage，前者在当前标签页关闭后自动清除，不会造成跨会话的脏数据问题），页面取值时做双层兜底。
Page1侧跳转逻辑示例：

const passState = { prop1: val1, prop2: val2 };
// 同步写入缓存
sessionStorage.setItem('page2_temp_state', JSON.stringify(passState));

// 原有跳转逻辑不变
<Redirect
  to={{
    pathname: '/page2',
    state: passState
  }}
/>

Page2侧取值逻辑示例：

// 优先读路由state，不存在则从缓存取
const pageState = props.location.state || JSON.parse(sessionStorage.getItem('page2_temp_state') || '{}');
// 按需可在取值后清除缓存，避免后续进入页面读到旧数据
// sessionStorage.removeItem('page2_temp_state')

方案3：传唯一ID + 全局状态/接口拉取完整数据（适合复杂、大体积参数） #

如果要传递的是复杂对象、不可序列化数据（比如表单草稿、大体积列表数据），不要直接通过路由state传：

• 跳转前先把完整数据存入全局状态（Redux/Zustand/Context都可）或者前端临时缓存，生成一个唯一的ID
• 路由跳转时只把这个ID拼在URL里
• Page2页面拿到ID后，优先从全局状态读对应数据，如果刷新后全局状态重置，就用ID调用接口拉取完整数据即可

通用注意事项 #

永远不要假设props.location.state一定存在，除了刷新场景，用户手动输入地址、从外部链接跳转进来、分享链接给其他用户访问时，state都会是空值，必须做空值兜底逻辑，避免页面直接报错白屏。

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