react router 监听路由变换

React Router 提供了一种方法来监听路由变化。可以使用`useEffect`钩子函数以及`useLocation`钩子函数来实现监听路由变化。下面是一个例子：

首先，需要导入相关的依赖：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

然后，在函数组件中使用`useLocation`获取当前的路由信息，并在`useEffect`中监听路由的变化：

function MyComponent() {
  const location = useLocation();

  useEffect(() => {
    // 在这里可以执行想要的操作，比如向后端发送请求、更新页面等
    console.log('当前路由发生了变化：', location.pathname);
  }, [location]);

  return (
    // 组件的 JSX 代码
  );
}

在上面的代码中，我们通过`useLocation`获取当前的路由信息，并将其作为`useEffect`的依赖项。当路由发生变化时，`useEffect`中的回调函数就会被触发。

在回调函数中，你可以执行任何你希望随路由变化而发生的操作，比如向后端发送请求获取数据、更新页面内容等。这里只是简单地在控制台打印了当前路由的路径。

总结一下，React Router 提供了 `useLocation` 以及 `useEffect` 这两个钩子函数来监听路由的变化。我们可以利用这些钩子函数来执行相应的操作，以便在路由发生变化时响应进行相应的处理。