React路由useLocation刷新后state为null的解决方案咨询

问题场景 #

在React项目中实现以下功能：通过表格展示含id的数据集，点击表格链接时用useNavigate跳转至Test页面并传递id参数。首次跳转可正常获取id，但刷新Test页面或直接通过URL访问该页面时，useLocation获取的state.id为null。

问题原因 #

通过navigate的state属性传递的参数仅存储在内存中，并未持久化到URL或本地存储。当页面刷新、直接访问目标路由，或者从浏览器历史记录重新进入时，内存中的state数据会丢失，导致无法获取到id。

最优解决方案 #

将id参数通过URL路由参数传递，这种方式符合RESTful设计规范，参数会被保存在URL中，刷新页面或直接访问URL时都能正常获取。以下是具体修改步骤：

1. 修改路由配置 #

将Test页面的路由配置改为带参数的形式：

// 假设你的路由配置文件（如App.js或routes.js）
import { Routes, Route } from 'react-router-dom';
import Test from './Test';

// ...其他路由
<Routes>
  {/* 其他路由 */}
  <Route path="/test/:id" element={<Test />} />
</Routes>

2. 修改Grid.js中的跳转逻辑 #

更新clickCallback函数，将id作为路由参数拼接到URL中：

// Grid.js
import { useNavigate } from "react-router";

const Grid = (props) => {
  // ...原有代码
  const navigate = useNavigate();

  const clickCallback = (id) => {
    // 改为跳转到带id参数的路由
    navigate(`/test/${id}`);
  };

  // ...原有代码
};

export default Grid;

3. 修改Test.js中的参数获取逻辑 #

使用useParams钩子从URL路由参数中获取id：

// Test.js
import { useParams } from "react-router-dom";

const Test = () => {
  const { id } = useParams();

  // 如需数字类型，可转换：const newId = parseInt(id, 10);
  return (
    <>
      <h2>Test Page</h2>
      <p>ID here: {id}</p>
    </>
  );
};

export default Test;

备选方案：使用查询参数（Query Param） #

如果不想修改路由结构，也可以用查询参数传递id：

修改Grid.js的跳转逻辑 #

const clickCallback = (id) => {
  navigate(`/test?id=${id}`);
};

修改Test.js的参数获取逻辑 #

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

const Test = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  return (
    <>
      <h2>Test Page</h2>
      <p>ID here: {id}</p>
    </>
  );
};

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