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

在React中，可以通过条件渲染来隐藏组件，当路由更改时，可以利用React Router提供的功能来实现隐藏组件的效果。

首先，需要安装React Router库，可以使用以下命令进行安装：

npm install react-router-dom

接下来，在应用的根组件中，引入React Router的相关组件和函数：

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

然后，定义需要隐藏的组件，例如一个名为"ComponentToHide"的组件：

import React from 'react';

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

export default ComponentToHide;

接下来，在根组件中，使用React Router的Switch组件包裹需要隐藏的组件，并使用Route组件来定义路由规则：

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;

在上述代码中，Route组件的path属性指定了路由的路径，component属性指定了对应的组件。当路由匹配到指定路径时，对应的组件将会被渲染。

如果想要隐藏组件，可以使用Redirect组件将路由重定向到其他路径。例如，可以在路由更改时将组件隐藏，可以在根组件中添加一个状态来控制重定向：

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;

在上述代码中，通过useState来定义一个名为hideComponent的状态，初始值为false。然后，使用useEffect来监听路由的变化，当路由发生变化时，将hideComponent状态设置为true，从而触发重定向。

在Switch组件中，根据hideComponent状态的值来决定渲染哪个组件。如果hideComponent为true，则使用Redirect组件将路由重定向到"/hidden"路径，这样就隐藏了原本的组件。同时，为了避免"/hidden"路径被渲染出来，可以使用render属性将其对应的组件设为null。

这样，在路由更改时，原本的组件就会被隐藏起来。