如何根据路由中的变量有条件地路由到react中的组件？

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

// 假设这是两个不同的用户信息组件
const UserComponentA = () => <div>User A Info</div>;
const UserComponentB = () => <div>User B Info</div>;

// 主组件，用于根据路由变量渲染不同的用户组件
const UserPage = () => {
  const { userId } = useParams();

  // 根据userId的值决定渲染哪个组件
  let UserComponent;
  if (userId === '1') {
    UserComponent = UserComponentA;
  } else if (userId === '2') {
    UserComponent = UserComponentB;
  } else {
    UserComponent = () => <div>User not found</div>;
  }

  return <UserComponent />;
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/user/:userId" component={UserPage} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
};

export default App;