如何将React Router <Link >与antd表列中的id一起使用

import { Link } from "react-router-dom";
import { Table } from "antd";

const data = [
  {
    id: 1,
    name: "John Doe",
  },
  {
    id: 2,
    name: "Jane Smith",
  },
];

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    render: (text, record) => (
      <Link to={{ pathname: `/user/${record.id}`, state: { id: record.id } }}>
        {text}
      </Link>
    ),
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
];

const MyTable = () => {
  return <Table dataSource={data} columns={columns} />;
};

export default MyTable;

import { BrowserRouter as Router, Route } from "react-router-dom";
import UserPage from "./UserPage";

const App = () => {
  return (
    <Router>
      <Route exact path="/user/:id" component={UserPage} />
    </Router>
  );
};

export default App;

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

const UserPage = () => {
  const location = useLocation();
  const id = location.state.id;

  return <div>User ID: {id}</div>;
};

export default UserPage;