当前位置：首页 > React

react如何监听路由变化

2026-03-10 20:06:41React

监听路由变化的方法

在React中监听路由变化通常依赖于路由库（如React Router）提供的API或原生浏览器事件。以下是几种常见方法：

使用React Router的`useEffect`监听

适用于React Router v5/v6，通过依赖路由属性变化触发副作用：

react如何监听路由变化

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

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

  useEffect(() => {
    console.log('路由变化:', location.pathname);
    // 执行路由变化后的逻辑
  }, [location]); // 依赖location对象
}

类组件中通过`withRouter`监听（React Router v5）

若使用类组件，可通过高阶组件withRouter获取路由属性：

react如何监听路由变化

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      console.log('路由变化:', this.props.location.pathname);
    }
  }
}

export default withRouter(MyComponent);

监听浏览器原生`popstate`事件

适用于非React Router场景或需要全局监听的情况：

useEffect(() => {
  const handleRouteChange = () => {
    console.log('路由变化:', window.location.pathname);
  };

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

使用React Router的`history.listen`（v5）

直接操作history对象进行监听（需注意版本兼容性）：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location) => {
      console.log('路由变化:', location.pathname);
    });
    return () => unlisten(); // 清除监听
  }, [history]);
}

注意事项

React Router版本差异：v6中history.listen用法与v5不同，需通过useNavigation或unstable_HistoryRouter获取history对象。
性能优化：避免在监听器中执行昂贵操作，必要时使用防抖/节流。
清理监听器：组件卸载时务必移除事件监听以防止内存泄漏。

根据项目使用的路由库版本和组件类型选择合适的方法即可实现路由监听。