如何在react-router v5中监听query param变更事件

一、基于React Router的Hook方案 #

React Router内置了监听URL变化的能力，通过useLocation结合useEffect即可实现query参数变更监听：

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

function useQueryParamChangeListener(callback) {
  const location = useLocation();
  const [searchParams] = useSearchParams();

  useEffect(() => {
    // 将query参数转为键值对对象
    const queryObj = Object.fromEntries(searchParams.entries());
    callback(queryObj);
  }, [location.search, callback, searchParams]);
}

// 使用示例
function MyComponent() {
  useQueryParamChangeListener((query) => {
    console.log('Query参数变更:', query);
    // 此处编写你的业务逻辑，比如根据参数更新组件状态
  });

  return <div>监听Query参数变更</div>;
}

当URL的search部分（即query参数）发生变化时，该hook会自动触发回调，useSearchParams可直接将query解析为便于使用的对象。

二、不依赖React Router的通用方案 #

如果不使用React Router，可直接监听浏览器URL变化，注意pushState和replaceState不会触发原生popstate事件，需手动封装这两个方法：

1. Hook版本（函数组件适用） #

import { useEffect, useRef } from 'react';

function useQueryParamListener(callback) {
  const callbackRef = useRef(callback);
  const originalPushState = useRef(window.history.pushState);
  const originalReplaceState = useRef(window.history.replaceState);

  useEffect(() => {
    callbackRef.current = callback;

    // 解析当前URL的query参数
    const getQueryObj = () => {
      const searchParams = new URLSearchParams(window.location.search);
      return Object.fromEntries(searchParams.entries());
    };

    // 触发回调的通用方法
    const triggerCallback = () => {
      callbackRef.current(getQueryObj());
    };

    // 监听浏览器前进/后退事件
    window.addEventListener('popstate', triggerCallback);

    // 重写pushState和replaceState，保证参数变更时触发回调
    window.history.pushState = function(...args) {
      originalPushState.current.apply(this, args);
      triggerCallback();
    };

    window.history.replaceState = function(...args) {
      originalReplaceState.current.apply(this, args);
      triggerCallback();
    };

    // 组件挂载时触发一次初始回调
    triggerCallback();

    // 清理监听和方法重写
    return () => {
      window.removeEventListener('popstate', triggerCallback);
      window.history.pushState = originalPushState.current;
      window.history.replaceState = originalReplaceState.current;
    };
  }, []);
}

// 使用示例
function MyComponent() {
  useQueryParamListener((query) => {
    console.log('Query参数变更:', query);
    // 处理业务逻辑
  });

  return <div>无依赖监听Query参数</div>;
}

2. 原生JS版本（类组件或纯JS场景适用） #

// 解析query参数为对象
function getQueryParams() {
  return Object.fromEntries(new URLSearchParams(window.location.search).entries());
}

// 监听query参数变化
function listenQueryParamsChange(callback) {
  const originalPushState = window.history.pushState;
  const originalReplaceState = window.history.replaceState;

  const triggerCallback = () => callback(getQueryParams());

  window.addEventListener('popstate', triggerCallback);

  // 重写历史记录方法
  window.history.pushState = function(...args) {
    originalPushState.apply(this, args);
    triggerCallback();
  };

  window.history.replaceState = function(...args) {
    originalReplaceState.apply(this, args);
    triggerCallback();
  };

  // 初始触发一次
  triggerCallback();

  // 返回清理函数
  return () => {
    window.removeEventListener('popstate', triggerCallback);
    window.history.pushState = originalPushState;
    window.history.replaceState = originalReplaceState;
  };
}

// 使用示例
const cleanup = listenQueryParamsChange((query) => {
  console.log('Query变更:', query);
});

// 停止监听时调用
// cleanup();

内容的提问来源于stack exchange，提问作者Ash