如何在单个组件中使用多个路由器插座

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

// 路由器插座1
const RouterOutlet1 = () => (
  <Switch>
    <Route exact path="/route1" component={Component1} />
    <Route exact path="/route2" component={Component2} />
    ...
  </Switch>
);

// 路由器插座2
const RouterOutlet2 = () => (
  <Switch>
    <Route exact path="/route3" component={Component3} />
    <Route exact path="/route4" component={Component4} />
    ...
  </Switch>
);

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>My Component</h1>
        
        {/* 渲染路由器插座1 */}
        <Router>
          <RouterOutlet1 />
        </Router>

        {/* 渲染路由器插座2 */}
        <Router>
          <RouterOutlet2 />
        </Router>
      </div>
    );
  }
}