React路由器在路由改变时创建两个完全相同的组件，如何在两个路由上重用相同的组件？

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

function App() {
  return (
    <Router>
      <Route path="/route1" component={MyComponent} />
      <Route path="/route2" component={MyComponent} />
    </Router>
  );
}

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

function App() {
  return (
    <Router>
      <Route path="/route1" render={() => <MyComponent />} />
      <Route path="/route2" render={() => <MyComponent />} />
    </Router>
  );
}

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/route1" component={MyComponent} />
        <Route path="/route2" component={MyComponent} />
      </Switch>
    </Router>
  );
}