React Router v6中如何监听querystring变化以响应同页路由变更？

• 在react-router-dom v6版本下，你手动引入并监听的history对象，和React Router内部用来驱动路由状态更新的history实例不是同一个对象。你监听的是独立创建的孤立实例，自然接收不到Router组件触发的路由跳转事件，这就是监听器全程不触发的根本原因。
• v6版本已经对底层history的实现做了封装隔离，不再把原生history对象直接暴露给业务层使用，之前v5版本直接监听全局history的写法在v6下天然失效。

这部分完全不需要手动耦合底层history，用官方提供的声明式API就能实现感知，两种常用实现方式：

官方推荐方案：用useSearchParams绑定参数状态 #

• useSearchParams是v6专门用来处理URL查询参数的Hook，内部已经完成了对路由位置变化的订阅，哪怕pathname完全一致，只要查询字符串变化，Hook就会返回更新后的参数对象，触发组件重渲染。
• 实现逻辑非常简单：把需要监听的查询参数值，作为useEffect的依赖项，参数一变就自动触发回调同步表单状态，根本不需要手写监听器。

对应的示例代码：

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

function FormWithSelect() {
  // 表单下拉框的选中值状态
  const [selectValue, setSelectValue] = useState('');
  // 获取路由携带的查询参数
  const [searchParams] = useSearchParams();
  // 解析出需要同步到表单的查询参数，比如参数名叫selectedOption
  const querySelectedValue = searchParams.get('selectedOption');

  useEffect(() => {
    // 只要query里的selectedOption值变化，这里就会自动执行
    console.log('检测到查询参数变更，当前值：', querySelectedValue);
    // 把查询参数同步更新到表单state，填充下拉框
    setSelectValue(querySelectedValue || '');
  }, [querySelectedValue]); // 依赖项直接写解析后的参数值即可

  // 下拉框变更时把值写入query的逻辑此处省略
}

备用方案：用useLocation监听完整URL变化 #

• 如果你需要感知完整的location变化（包括pathname、hash、search所有部分），可以直接用useLocation Hook，它同样是路由内部状态的订阅者，任何URL层面的变更都会返回新的location对象。
• 实现逻辑：把location.search作为useEffect的依赖项，就能精准捕获查询字符串的变化：

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

function FormWithSelect() {
  const [selectValue, setSelectValue] = useState('');
  const location = useLocation();

  useEffect(() => {
    console.log('检测到URL查询段变更：', location.search);
    // 解析search字符串、同步表单state的逻辑
    const params = new URLSearchParams(location.search);
    setSelectValue(params.get('selectedOption') || '');
  }, [location.search]);
}

• 手动创建/引入history对象的写法，本质是和Router组件内部的history实例做了隔离，两边的事件通道完全独立，就算写法完全符合history库的用法，也收不到React Router触发的路由事件。
• v6的API设计本身已经覆盖了所有路由状态变更的感知场景，通过Hook的订阅机制就能拿到同路径跳转、查询参数变更等所有场景的通知，不需要再绕到底层手动写监听逻辑，反而容易因为实例不匹配、监听器清理不当之类的问题踩坑。

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