Reactjs 无法通过react 路由中的链接传递信息

我无法使用props 通过Reaction路由中的链接传递信息.我试图通过联系人卡片中的一个组件传递当前联系人，并将相同的props 传递给联系人详细信息，但我无法在联系人详细信息中获取我发送的对象，在安慰props 时变得未定义.

import React, { useState } from 'react';
import user from "../images/user.png";
import { Link } from "react-router-dom";

function ContactCard(props) {
  const [data, setData] = useState(props.contact)
  const { id, name, email, mobile } = props.contact;

  return (
    <div>
      <div className="item">
        <div className="ui avtar image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <Link to={{ pathname: `/contact/${id}`, state: { data: data }}}>
            <div className="header">{name}</div>
            <div>{email}</div>
            <div>{mobile}</div>
          </Link>
        </div>
        <i
          className="trash alternate outline icon"
          style={{ color: 'red', marginTop: '7px' }}
          onClick={() => props.clickHandler(id)}
        ></i>
      </div>
    </div>
  );
}

export default ContactCard;

import React from 'react';
import { useLocation } from 'react-router-dom';
import user from "../images/user.png";

function ContactDetails(props) {
    const location = useLocation();
    console.log(props, "props");
    const data = location.state?.data;
    console.log(data);
//   const { contact } = props.location.state;
//   const { id, name, email, mobile } = contact;

  return (
    <div className="main">
      <div className="ui card centered">
        <div className="image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <div className="header">name</div>
          <div className="description">email</div>
          <div className="description">mobile</div>
        </div>
      </div>
    </div>
  );
}

export default ContactDetails;

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { v4 as uuid } from "uuid";
import './App.css';
import Header from "./Header";
import AddContact from "./AddContact";
import ContactList from "./Contactlist";
import ContactDetails from "./ContactDetails";

function App() {
  const LOCAL_STORAGE_KEY = "contacts";

  const [contacts, setContacts] = useState(
    JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  );

  const addHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, { id: uuid(), ...contact }]);
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });

    setContacts(newContactList);
  }

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

  return (
    <div className="ui container">
      <Router>
        <Header />
        <div className="content">
          <Routes>
            <Route path="/" element={<ContactList contacts={contacts} getContactId={removeContactHandler} />} />
            <Route path="/add" element={<AddContact addHandler={addHandler} />} />
            <Route
              path="/contact/:id"
              element={<ContactDetails/>}
            />
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;