如何在路由更改时隐藏react组件？

npm install react-router-dom

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

import React from 'react';

const ComponentToHide = () => {
  return <div>这是需要隐藏的组件</div>;
};

export default ComponentToHide;

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ComponentToHide} />
        {/* 其他路由规则 */}
      </Switch>
    </Router>
  );
};

export default App;

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import ComponentToHide from './ComponentToHide';

const App = () => {
  const [hideComponent, setHideComponent] = useState(false);

  useEffect(() => {
    const handleRouteChange = () => {
      setHideComponent(true);
    };

    window.addEventListener('popstate', handleRouteChange);

    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  }, []);

  return (
    <Router>
      <Switch>
        {hideComponent ? (
          <Redirect to="/hidden" />
        ) : (
          <Route exact path="/" component={ComponentToHide} />
        )}
        <Route exact path="/hidden" render={() => null} />
        {/* 其他路由规则 */}
      </Switch>
    </Router>
  );
};

export default App;