为什么我无法从react-router获取参数？

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import User from './User';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}

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

function User() {
  const { id } = useParams();

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

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

class User extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return <div>User ID: {id}</div>;
  }
}

export default withRouter(User);

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import User from './User';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user/123">User 123</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}

export default App;

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

function User() {
  const { id } = useParams();

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

export default User;