如何通过react路由传递数据

import { Link } from 'react-router-dom';

const ListPage = () => {
  const data = { id: 1, name: '示例数据' };

  return (
    <div>
      <h1>列表页</h1>
      <Link to={`/detail/${data.id}`}>查看详情</Link>
    </div>
  );
};

const DetailPage = (props) => {
  const { id } = props.match.params;

  return (
    <div>
      <h1>详情页</h1>
      <p>ID: {id}</p>
    </div>
  );
};

import { useHistory } from 'react-router-dom';

const LoginPage = () => {
  const history = useHistory();

  const handleLogin = () => {
    const user = { id: 1, name: '示例用户' };
    history.push({
      pathname: '/home',
      state: { user }
    });
  };

  return (
    <div>
      <h1>登录页</h1>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

const HomePage = (props) => {
  const { user } = props.location.state;

  return (
    <div>
      <h1>首页</h1>
      <p>用户ID: {user.id}</p>
      <p>用户名: {user.name}</p>
    </div>
  );
};