使用React Router :如何在路由中多次使用不同的道具渲染组件？

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

const App = () => {
  return (
    <Router>
      <Route path="/route1" render={() => <Component prop1="value1" />} />
      <Route path="/route2" render={() => <Component prop2="value2" />} />
      <Route path="/route3" render={() => <Component prop3="value3" />} />
    </Router>
  );
};

const Component = (props) => {
  const { prop1, prop2, prop3 } = props;

  // 使用道具进行渲染和逻辑处理
  // ...

  return <div>Component</div>;
};