有没有使用react路由器隐藏组件的最佳实践方法？

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

const App = () => {
  const [isComponentHidden, setIsComponentHidden] = React.useState(false);

  const toggleComponentVisibility = () => {
    setIsComponentHidden(!isComponentHidden);
  };

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <button onClick={toggleComponentVisibility}>
            Toggle Component Visibility
          </button>
          {!isComponentHidden && <ComponentToHide />}
        </Route>
        <Route path="/other">
          <OtherComponent />
        </Route>
      </Switch>
    </Router>
  );
};

const ComponentToHide = () => {
  return <div>This component can be hidden</div>;
};

const OtherComponent = () => {
  return <div>This component is always visible</div>;
};

export default App;