当前位置：首页 > React

react如何监听路由变化

2026-01-24 11:46:25React

监听路由变化的方法

在React中监听路由变化可以通过多种方式实现，具体取决于使用的路由库（如React Router）或原生浏览器API。

使用React Router的`useEffect`和`useLocation`

React Router v5及以上版本提供了useLocation钩子，可以结合useEffect监听路由变化：

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

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

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

  return <div>当前路径: {location.pathname}</div>;
}

使用React Router的`history.listen`

如果需要在非组件环境中监听路由变化（例如Redux store），可以通过history对象直接监听：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.listen((location, action) => {
  console.log('路由变化:', action, location.pathname);
});

// 在Router中传入自定义history
<Router history={history}>
  {/* 路由配置 */}
</Router>

使用浏览器原生API

在不依赖React Router的情况下，可以通过原生popstate事件监听浏览器路由变化：

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

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

使用React Router v6的`useNavigation`

React Router v6提供了useNavigation钩子，可以监听导航状态（如加载、提交等）：

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

function MyComponent() {
  const navigation = useNavigation();
  console.log('当前导航状态:', navigation.state);
  return null;
}