React路由器V5可选路径

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

const UserComponent = () => {
  const { userId } = useParams();
  const user = {
    1: { name: 'Alice' },
    2: { name: 'Bob' }
  };

  const userName = user[userId]?.name || 'Guest';

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {userName}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/user/:userId?" component={UserComponent} />
        <Route path="/" exact>
          <h1>Home Page</h1>
        </Route>
      </Switch>
    </Router>
  );
};

export default App;