当前位置：首页 > React

react如何监听link触发的路由更改

2026-01-26 04:00:02React

监听 Link 触发的路由更改方法

在 React 中，监听路由更改通常依赖于 react-router-dom 提供的路由管理工具。以下是几种常见的方法：

使用 `useEffect` 监听路由变化

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

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

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

  useEffect(() => {
    console.log('Route changed to:', location.pathname);
  }, [location]);

  return <div>Current path: {location.pathname}</div>;
}

使用 `history` 监听器

history 对象提供了原生的监听方法，适用于类组件或需要全局监听的情况：

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

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

  useEffect(() => {
    const unlisten = history.listen((location) => {
      console.log('Route changed to:', location.pathname);
    });
    return () => unlisten(); // Cleanup on unmount
  }, [history]);

  return <div>Component content</div>;
}

自定义 Link 组件

通过自定义 Link 组件，可以在点击时触发额外逻辑：

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

function CustomLink({ to, onClick, ...props }) {
  const handleClick = (e) => {
    if (onClick) onClick();
    // 可以在此处添加其他逻辑
    console.log('Navigating to:', to);
  };

  return <Link to={to} {...props} onClick={handleClick} />;
}

// 使用示例
<CustomLink to="/about" onClick={() => console.log('Custom click')}>
  About
</CustomLink>

使用路由上下文

对于更复杂的场景，可以通过 Router 的上下文直接订阅路由变化：

import { useContext, useEffect } from 'react';
import { __RouterContext } from 'react-router-dom';

function RouteListener() {
  const { history } = useContext(__RouterContext);

  useEffect(() => {
    const unlisten = history.listen(() => {
      console.log('Route changed via context');
    });
    return unlisten;
  }, [history]);

  return null;
}