React Router页面刷新（含子路由）时如何保留路由state数据

react-router 的路由state是绑定在单条history记录上的：

• 从其他页面跳转到/dashboard时，会生成一条绑定了传入state的history记录，此时在/dashboard页面刷新，浏览器读取的就是这条带state的记录，所以数据正常。
• 从/dashboard跳转到子路由时，会生成新的history记录，新记录默认不会自动继承父路由记录上的state，此时在子路由页面刷新，浏览器读取的是子路由对应的无state的history记录，自然拿不到之前传的数据，这是react-router的默认行为，不是路由配置错误。

以下方案按推荐优先级排序，可根据项目现状选择：

方案1：父路由层做状态兜底透传（最推荐，零侵入） #

这个方案不需要修改你现有的navigate跳转代码，只需要调整dashboard父路由的布局组件，做统一的状态缓存和透传即可：

• 首次从其他页面进入dashboard拿到有效state时，自动将state缓存到sessionStorage（标签页关闭后自动清空，不会残留脏数据）
• 父路由组件统一合并当前路由state和缓存的state，通过Outlet上下文透传给所有子路由
• 子路由不需要单独写存储读取逻辑，直接调用封装好的hook拿稳定的state值即可

参考实现代码：

1. 编写Dashboard公共布局组件

import { useLocation, Outlet } from 'react-router-dom';
import { useEffect, createContext, useContext } from 'react';

const DashboardStateContext = createContext(null);

export default function DashboardLayout() {
  const location = useLocation();
  // 状态优先级：当前路由携带的state > sessionStorage缓存的state
  const cachedState = JSON.parse(sessionStorage.getItem('dashboardState') || 'null');
  const validState = location.state?.id ? location.state : cachedState;

  useEffect(() => {
    // 拿到有效state时自动更新缓存
    if (validState?.id) {
      sessionStorage.setItem('dashboardState', JSON.stringify(validState));
    }
  }, [validState]);

  return (
    <DashboardStateContext.Provider value={validState}>
      {/* 这里放你原有的dashboard公共头部、侧边栏等布局内容 */}
      <Outlet />
    </DashboardStateContext.Provider>
  )
}

// 子路由统一用这个hook获取state，不需要单独处理缓存逻辑
export function useDashboardState() {
  return useContext(DashboardStateContext);
}

2. 调整路由配置，将原/dashboard路由的element替换为上面的布局组件，原有子路由嵌套结构保持不变：

<Route path="/dashboard" element={<DashboardLayout />}>
   <Route path="sub-route-1" element={<SubPage1 />} />
   <Route path="sub-route-2" element={<SubPage2 />} />
   <Route path="sub-route-3" element={<SubPage3 />} />
</Route>

3. 子路由中使用state的方式：

// 所有dashboard下的子组件直接调用即可，不管是跳转进入还是子路由刷新都能拿到稳定数据
const { stringData, id } = useDashboardState();

方案2：核心参数放入路由路径（适合非敏感参数场景） #

如果传递的id不属于敏感数据、可以暴露在地址栏，可以直接把id作为路由路径参数，从根源避免state丢失问题：

1. 调整路由配置为路径参数形式：

<Route path="/dashboard/:id" element={<DashboardLayout />}>
  {/* 子路由保持不变 */}
</Route>

2. 调整跳转逻辑，把id拼入路径：

navigate(`/dashboard/${passData}`, { state: { stringData: "smart warehouse" } });

3. 不管在哪个层级的子路由，都可以通过useParams()拿到稳定的id值，stringData可以搭配方案1的sessionStorage缓存逻辑兜底，也可以根据id调用接口拉取对应数据。

这个方案的缺点是参数会暴露在地址栏，不适合传递过长、敏感的参数。

方案3：全局状态托管（适合已有全局状态库的项目） #

如果项目本身已经接入Redux、Zustand、Jotai等全局状态管理库，可以在执行navigate跳转前，把要传递的stringData和id存入全局状态，dashboard和其子路由直接从全局状态读取数据即可。
注意需要搭配状态持久化能力（比如redux-persist、Zustand persist中间件，存储介质选sessionStorage），否则刷新页面全局状态重置依然会丢失数据。如果项目本身没有接入全局状态库，没必要为了这个需求额外引入，用方案1最轻量。

• 不要用localStorage缓存这类路由级状态，除非你明确需要跨标签页、关闭浏览器后仍保留数据，否则很容易残留旧数据，导致用户进入dashboard时读到历史错误id。
• 不要尝试手动修改history栈给子路由注入state，react-router v6之后没有提供父路由state自动继承的配置，手动修改history内部状态很容易和路由的内置状态逻辑冲突，问题排查成本很高。

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