如何隐藏正在反应的组件并显示另一个组件？

.hidden-component {
  display: none;
}

.visible-component {
  display: block;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent1: true,
      showComponent2: false
    };
  }

  render() {
    return (
      <div>
        {this.state.showComponent1 && <Component1 />}
        {this.state.showComponent2 && <Component2 />}
      </div>
    );
  }
}

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Component1} />
      <Route path="/component2" component={Component2} />
    </Switch>
  </Router>
);