react监听路由变化

在React中，你可以使用React Router来处理路由，同时你可以通过监听路由变化来执行特定的操作。React Router提供了一个 useEffect 钩子，可以用来监听路由的变化。以下是一个示例，展示如何在React中在路由变化时执行操作：

首先，确保你已经安装了React Router，你可以使用以下命令安装：

npm install react-router-dom

然后，你可以在组件中使用 useEffect 钩子来监听路由变化：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

function Home() {
  // 获取当前的 location 对象
  const location = useLocation();

  useEffect(() => {
    // 在路由变化时执行的操作
    console.log('Route has changed:', location.pathname);
  }, [location]);

  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

export default App;

在上面的示例中，我们在 Home 组件中使用了 useEffect 钩子，并将 location 对象作为依赖项传递给 useEffect。这样，在路由变化时，useEffect 中的代码将会被执行。你可以在其中执行任何需要在路由变化时触发的操作。

通过类似的方式，你可以在其他需要监听路由变化的组件中使用 useEffect 钩子来执行操作。