React Router v6页面刷新后location.state数据丢失问题求助

核心原因 #

location.state 是存储在浏览器内存中的临时状态，并非持久化存储。硬刷新页面时，浏览器会重新发起请求，内存中的临时状态会被清空，因此刷新后 location.state 会变为 null。所谓“刷新后能保留”的场景，基本都是额外做了持久化处理，并非 React Router 的原生行为。

解决办法 #

方法1：将状态存入 URL Search 参数 #

适合非敏感数据，状态会暴露在 URL 中，但刷新后不会丢失：

组件A跳转代码：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
// 将状态转为 URL Search 参数，注意对中文/特殊字符编码
navigate(`/instruction/${i.id}?sId=${s.id}&sName=${encodeURIComponent(s.name)}`);

组件B获取参数：

import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const sId = searchParams.get('sId');
const sName = decodeURIComponent(searchParams.get('sName'));

console.log({ sId, sName });

方法2：用 SessionStorage/LocalStorage 持久化状态 #

适合不想暴露在 URL 中的数据，注意清理避免影响其他页面：

组件A跳转时存储状态：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

// 存入 sessionStorage，页面关闭后自动清除
sessionStorage.setItem(
  'instructionPageState',
  JSON.stringify({ sId: s.id, sName: s.name })
);
navigate(`/instruction/${i.id}`);

组件B加载时读取并清理：

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

const location = useLocation();
const [pageState, setPageState] = useState(null);

useEffect(() => {
  // 优先取 location.state，无则从 storage 读取
  if (location.state) {
    setPageState(location.state);
  } else {
    const storedState = sessionStorage.getItem('instructionPageState');
    if (storedState) {
      setPageState(JSON.parse(storedState));
    }
  }

  // 组件卸载时清除存储的状态
  return () => {
    sessionStorage.removeItem('instructionPageState');
  };
}, [location.state]);

console.log(pageState);

方法3：检查路由配置合理性 #

确认组件B的路由配置正确，避免因路由嵌套、参数匹配错误导致状态丢失：

// 路由配置示例
import { Routes, Route } from 'react-router-dom';
import ComponentB from './ComponentB';

function AppRoutes() {
  return (
    <Routes>
      {/* 确保路由路径与跳转路径匹配 */}
      <Route path="/instruction/:id" element={<ComponentB />} />
    </Routes>
  );
}

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