当前位置：首页 > React

react实现路由监听

2026-01-26 23:10:08React

实现路由监听的基本方法

在React中实现路由监听通常涉及使用react-router-dom库提供的API。以下是几种常见方式：

使用`useEffect`监听路由变化

通过结合useLocation和useEffect可以监听路由变化：

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

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

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

  return <div>{/* 应用内容 */}</div>;
}

使用`history`对象监听

对于需要更细粒度控制的情况，可以直接监听history对象：

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

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

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      console.log(`Route ${action} to ${location.pathname}`);
    });
    return () => unlisten(); // 清理监听器
  }, [history]);

  return <div>{/* 应用内容 */}</div>;
}

类组件中的实现方式

在类组件中可以通过高阶组件或生命周期方法实现：

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

class App extends React.Component {
  componentDidMount() {
    this.unlisten = this.props.history.listen((location) => {
      console.log('Route changed:', location.pathname);
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    return <div>{/* 应用内容 */}</div>;
  }
}

export default withRouter(App);

监听特定路由变化

如果需要针对特定路由执行操作，可以在监听器中添加条件判断：

useEffect(() => {
  const unlisten = history.listen((location) => {
    if (location.pathname === '/dashboard') {
      // 特定路由逻辑
    }
  });
  return unlisten;
}, [history]);

路由变化时的数据获取

结合路由监听与数据获取的常见模式：

useEffect(() => {
  const fetchData = async () => {
    const data = await fetch(`/api${location.pathname}`);
    // 处理数据
  };
  fetchData();
}, [location.pathname]);

这些方法适用于React Router v5及以下版本。如果使用React Router v6，API略有不同但核心概念相似，主要使用useNavigate替代useHistory。

react实现路由监听