如何在react中的路由之间传递数据

// 发送数据的组件
import { Link } from 'react-router-dom';

const MyComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <Link to={{ pathname: '/target', state: data }}>Go to Target</Link>
  );
};

// 接收数据的组件
const TargetComponent = (props) => {
  const data = props.location.state;
  return (
    <div>
      <h1>Name: {data.name}</h1>
      <h1>Age: {data.age}</h1>
    </div>
  );
};

// 创建Context
const MyContext = React.createContext();

// 发送数据的组件
const MyComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <MyContext.Provider value={data}>
      <Link to="/target">Go to Target</Link>
    </MyContext.Provider>
  );
};

// 接收数据的组件
const TargetComponent = () => {
  const data = useContext(MyContext);
  return (
    <div>
      <h1>Name: {data.name}</h1>
      <h1>Age: {data.age}</h1>
    </div>
  );
};