React路由器发送带参数的URL

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

const UserList = () => {
  const userList = [
    { id: 1, name: 'User 1' },
    { id: 2, name: 'User 2' },
    { id: 3, name: 'User 3' },
  ];

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {userList.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

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

const UserDetails = () => {
  const { id } = useParams();

  // 根据ID获取用户详情的逻辑

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {id}</p>
      {/* 显示用户详情的其他内容 */}
    </div>
  );
};