React Router v6中history.location.search的替代方案及v5返回值疑问

一、关于history.location.search的含义（v5中） #

history.location.search不是当前所在路径，它返回的是URL中查询参数部分（即?开头的字符串）。比如当前URL是/goods?keyword=phone&price=1000，那么search的值就是?keyword=phone&price=1000。当前路径对应的是history.location.pathname（比如这里的/goods）。

二、v6中的替代方案 #

1. 使用useLocation钩子（最接近v5写法） #

v6提供了useLocation钩子，返回的location对象包含search属性，用法和v5的history.location.search完全一致：

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

function YourComponent() {
  const location = useLocation();
  const searchStr = location.search; // 得到?开头的查询参数字符串
}

2. 使用useSearchParams钩子（更推荐的查询参数处理方式） #

如果需要解析查询参数（比如直接获取keyword的值），v6专门提供了useSearchParams钩子，更方便操作：

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

function YourComponent() {
  const [searchParams] = useSearchParams();
  // 获取单个参数值，比如keyword
  const keyword = searchParams.get('keyword');
  // 如果要获取完整的?开头的查询字符串，可以这样：
  const searchStr = `?${searchParams.toString()}`;
}

类组件的处理方式 #

v6移除了withRouter高阶组件，若仍需在类组件中使用，有两种方式：

• 优先将类组件重构为函数组件（v6推荐写法）；
• 自行封装withRouter高阶组件，通过useLocation或useSearchParams获取相关值后传递给类组件。

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