React Router v4函数组件(Hooks+TS)中同路由查询参数更新的数据加载问题

我来帮你搞定这个问题！在函数组件结合TypeScript的场景中，我们可以用React Hook替代类组件的生命周期方法，完美实现监听URL查询参数变化并重新加载数据的需求。

核心思路 #

我们可以使用useLocation Hook获取当前路由的location对象，再配合useEffect Hook监听location.search的变化——当查询参数更新时，自动触发数据加载逻辑，这和类组件里componentWillReceiveProps（或getDerivedStateFromProps）的作用完全一致。

完整实现步骤 #

1. 导入必要依赖
   首先确保你已经安装了query-string（和你同事用的解析工具一致），然后在组件中导入所需的Hook和工具：

   import React, { useEffect } from 'react';
   import { useLocation } from 'react-router-dom';
   import queryString from 'query-string';
   

2. 定义组件和类型
   我们可以直接用useLocation获取路由信息，无需再用withRouter包裹组件（当然如果你的项目仍依赖withRouter，也可以兼容）。先定义好查询参数的类型：

   // 根据你的实际业务需求定义查询参数类型
   interface SearchParams {
     search?: string;
     // 可添加其他参数，比如 page、size 等
   }
   
   const ListPage: React.FC = () => {
     const location = useLocation();
   
     // 模拟你的数据加载函数，实际可替换为API请求
     const loadData = (params: SearchParams) => {
       console.log('开始加载数据，查询参数：', params);
       // 这里写你的数据获取逻辑
     };
   
     // 监听查询参数变化，触发数据加载
     useEffect(() => {
       // 解析URL中的查询参数
       const parsedParams = queryString.parse(location.search) as SearchParams;
       // 调用数据加载方法
       loadData(parsedParams);
   
       // 可选：如果是异步请求，添加清理函数防止内存泄漏
       return () => {
         // 比如取消未完成的请求
         // abortController?.abort();
       };
     }, [location.search]); // 仅当查询参数字符串变化时触发回调
   
     return (
       <div>
         {/* 你的表格和搜索按钮组件 */}
         <button onClick={() => {
           // 点击搜索按钮跳转并携带查询参数
           // 用history.push的方式（如果保留withRouter，可通过props.history访问）
           // props.history.push({ pathname: '/list', search: '?search=abc' });
           // 或者直接修改URL
           window.location.href = '/list?search=abc';
         }}>搜索</button>
       </div>
     );
   };
   
   export default ListPage;
   

关键细节说明 #

• 精准监听依赖项：我们选择监听location.search而非整个location对象，因为location是引用类型，每次路由变化都会生成新实例，但我们只关心查询参数的变化，这样可以避免不必要的重复触发，提升性能。
• TypeScript类型校验：通过as SearchParams将解析后的参数断言为我们定义的类型，确保使用参数时能获得TS的类型提示和校验。
• 替代withRouter：函数组件中使用useLocation可以直接获取路由信息，无需再用withRouter包裹组件，简化了代码结构。

如果之前你的尝试没生效，大概率是没有正确设置useEffect的依赖项，或者没有精准监听location.search的变化。按照上面的写法，应该就能完美实现你要的功能啦！

内容的提问来源于stack exchange，提问作者Hieu Ryan Hoang