react-router-dom中useParams钩子获取URL查询参数返回undefined求助

1. useParams() 适用场景错误
   useParams() 是用来读取路由定义中声明的路径动态参数，只有你在路由配置中写为类似<Route path="/cart/:id/:qty/:size" element={<CartScreen/>}/>的形式时，才能通过useParams()拿到对应值，它无法读取URL中?之后的查询字符串参数，所以你第一次调用全返回undefined。
2. useRouter() 适用场景错误
   useRouter() 是Next.js框架专属的路由钩子，如果你使用的是React生态的react-router-dom做路由管理，没有内置这个API，自然读取不到query属性下的参数。

如果你使用 react-router-dom v6（主流版本） #

直接用官方提供的useSearchParams钩子处理查询参数，示例代码如下：

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

export default function CartScreen(props) {
  // 第一个返回值就是查询参数实例
  const [searchParams] = useSearchParams();
  
  const id = searchParams.get("id");
  const qty = searchParams.get("qty");
  const size = searchParams.get("size");

  console.log("id : " + id);
  console.log("qty : " + qty);
  console.log("size : " + size);
  // 后续业务逻辑
}

如果你使用 react-router-dom v5 及更早版本 #

配合useLocation和原生URLSearchParams解析即可：

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

export default function CartScreen(props) {
  const { search } = useLocation();
  const searchParams = new URLSearchParams(search);
  
  const id = searchParams.get("id");
  const qty = searchParams.get("qty");
  const size = searchParams.get("size");
  // 后续业务逻辑
}

你看到console多次打印属于React组件的正常重渲染行为，组件挂载、内部状态更新、父组件重渲染都可能触发组件重新执行，只要最终参数读取正确就无需处理。

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