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

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/123">User 123</Link>
            </li>
            <li>
              <Link to="/user/456">User 456</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/user/:id" component={User} />
        </Switch>
      </div>
    </Router>
  );
};

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

  // 对URL参数进行安全处理
  const safeId = encodeURIComponent(id);

  return <h1>User {safeId}</h1>;
};

export default App;