在React中，你可以使用history库来监听路由的变化。history是React Router的一个核心组件，它提供了多种路由相关的API，如push、replace、go、pushTo、goBack、createLocation等。以下是一个简单的示例，展示如何在组件中监听路由的变化：

```jsx import React, { useEffect, useState } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact';

function App() { const [currentRoute, setCurrentRoute] = useState(null);

useEffect(() => { history.listen((location) => { setCurrentRoute(location); });

if (currentRoute) {
  // 这里可以执行一些路由相关操作，例如改变组件的state
  console.log('Route:', currentRoute);
}

}, []);

return ( ); }

export default App; ```

在这个示例中，我们首先设置了useEffect钩子，用于监听history组件中的路由变化。在useEffect中，我们使用history.listen函数来监听路由的变化。listen函数接收一个函数作为参数，该函数在路由发生变化时被调用。listen函数会自动触发一次，当当前路由发生变化时，setCurrentRoute函数会被调用，从而更新组件的状态。

然后，在useEffect钩子的返回部分，我们定义了一个currentRoute变量，用于存储当前路由的状态。在路由发生变化时，currentRoute变量会被更新，这样我们就可以在组件中执行相应的路由相关操作，例如改变组件的state。

最后，我们在App组件的return部分使用<Switch>组件来渲染路由导航栏。Switch组件的<Route>元素用于渲染一个路由，它的path属性指定路由的路径，component属性指定路由的组件，key属性指定路由的唯一标识符，history属性用于存储路由的状态。

通过这种方式，我们就可以在React组件中监听路由的变化，从而在路由发生变化时执行相应的路由相关操作。