«Почему объект, переданный через состояние Link в React, не определяется при обращении к нему через useLocation на следующей странице?»

У меня возникли проблемы с передачей объекта через состояние Link в React Router, и он отображается как неопределенный, когда я пытаюсь получить к нему доступ на следующей странице с помощью useLocation. Вот описание моей установки и проблем, с которыми я сталкиваюсь.

1. Компонент для персонала (Staff.js)

Я получаю данные о персонале из API и отображаю их с помощью React Router's Link:

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. Компонент детализации персонала (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;

Проблемы: 1.Неопределенный объект Staff: При переходе к компоненту StaffDetail объект staff не определен, хотя он должен передаваться через состояние Link. 2.Прямая навигация по URL: Я убедился, что не ввожу URL напрямую в адресную строку, что, как я понимаю, привело бы к неопределенности состояния. 3.Регистрация местоположения: Я зарегистрировал объект местоположения и обнаружил, что location.state равен null, когда я ожидал, что он будет заполнен объектом staff.

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={`/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"
        >
          {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>
  );
};