React中通过Link传递的state对象在目标页面用useLocation获取为何为undefined？

问题场景 #

在React Router中通过Link组件的state传递员工对象，但在目标页面使用useLocation获取时，该对象始终为undefined，location.state直接为null，且确认并非直接通过地址栏访问目标页面。

相关代码 #

1. Staff组件（Staff.js） #

从API获取员工数据并渲染跳转链接：

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

const Staff = () => {
  const [staffMembers, setStaffMembers] = useState([]);

  useEffect(() => {
    // Fetch staff data from API
    fetch('https://api.example.com/staff')
      .then(response => response.json())
      .then(data => setStaffMembers(data))
      .catch(error => console.error('Error fetching staff:', error));
  }, []);

  return (
    <div className="hidden p-5 md:grid md:grid-cols-4 gap-6">
      {staffMembers.map((staff) => (
        <Link
          key={staff.id}
          to={{
            pathname: `/staff/${staff.title.replace(/\s+/g, '-')}`,
            state: { staff } // Pass the entire staff object here
          }}
          className="image-div shadow hover:shadow-lg text-center rounded flex flex-col items-center border-l-8 border-yellow-200 p-3"
        >
          {staff.title_logo ? (
            <img src={staff.title_logo} alt={staff.title} className="w-16 h-16" />
          ) : (
            <div className="w-16 h-16 bg-gray-300 flex items-center justify-center">
              <span>No Logo Available</span>
            </div>
          )}
          <span className='mb-2 font-semibold text-lg'>{staff.title}</span>
        </Link>
      ))}
    </div>
  );
};

export default Staff;

2. Staff详情组件（StaffDetail.js） #

尝试通过useLocation接收传递的对象：

import React from 'react';
import { useLocation } from 'react-router-dom';

const StaffDetail = () => {
  const location = useLocation();
  const staff = location.state?.staff; // Attempt to access the staff object

  console.log('Location:', location); // Log the entire location object
  console.log('Staff:', staff); // Check what is logged here

  if (!staff) {
    return <div>No staff member data available. Please navigate from the staff list.</div>;
  }

  return (
    <div>
      <h1>{staff.title}</h1>
      {/* Render other staff details */}
    </div>
  );
};

export default StaffDetail;

问题点 #

• 点击Link导航到StaffDetail时，staff对象返回undefined
• 确认未直接输入目标URL，但location.state仍为null

排查与解决步骤 #

1. 适配React Router v6的写法 #

如果使用React Router v6，推荐拆分to和state属性的写法，避免旧版对象式写法的隐式兼容问题：

// 替换原Link组件的属性写法
<Link
  key={staff.id}
  to={`/staff/${staff.title.replace(/\s+/g, '-')}`}
  state={{ staff }}
  className="image-div shadow hover:shadow-lg text-center rounded flex flex-col items-center border-l-8 border-yellow-200 p-3"
>
  {/* 其他内容不变 */}
</Link>

2. 验证staff对象的有效性 #

在渲染Link前，先确认staff对象存在有效数据：

{staffMembers.map((staff) => {
  console.log('Current staff data:', staff); // 打印确认数据格式和内容
  return (
    <Link key={staff.id} ... />
  )
})}

如果API返回的条目存在undefined或格式异常，会导致传递的state无效。

3. 检查路由配置 #

确保StaffDetail的路由配置没有额外的重定向或state覆盖逻辑：

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

function App() {
  return (
    <Routes>
      <Route path="/staff" element={<Staff />} />
      <Route path="/staff/:title" element={<StaffDetail />} />
    </Routes>
  );
}

避免路由配置中存在干扰state传递的额外逻辑。

4. 排除浏览器缓存干扰 #

浏览器缓存可能导致路由状态异常，尝试清除缓存后重新测试，或使用隐私窗口打开页面。

5. 处理不可序列化的属性 #

如果staff对象包含函数、Symbol等不可序列化的属性，React Router会自动丢弃这些内容，甚至导致整个state变为null。可以先过滤不可序列化内容：

// 传递state前处理对象
state={{ staff: JSON.parse(JSON.stringify(staff)) }}

如果处理后state能正常传递，说明原对象存在不可序列化属性，需要从API返回或前端逻辑中移除这类属性。

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