如何使用props.match.params.id

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// 用户列表组件
function UserList() {
  return (
    <div>
      <h2>Users</h2>
      <ul>
        <li><Link to="/users/1">User 1</Link></li>
        <li><Link to="/users/2">User 2</Link></li>
      </ul>
    </div>
  );
}

// 用户详情组件
function UserDetail(props) {
  const userId = props.match.params.id;
  return (
    <div>
      <h2>User Detail</h2>
      <p>User ID: {userId}</p>
    </div>
  );
}

// 应用主组件
function App() {
  return (
    <Router>
      <div>
        <Route exact path="/users" component={UserList} />
        <Route path="/users/:id" component={UserDetail} />
      </div>
    </Router>
  );
}

export default App;

import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  return (
    <div>
      <h2>User Detail</h2>
      <p>User ID: {id}</p>
    </div>
  );
}

// 其他代码保持不变