React中form action="/search"提交时如何捕获URL搜索参数

API 探路者

2026-8-30

问题原因

你获取失败的核心原因是用错了对应的hook，和URL里的?符号、表单action配置都没有关系：

useParams的作用是提取路由路径中的动态段参数，比如路由配置为/search/:keyword时，访问路径/search/前端教程里的「前端教程」属于路径参数，才能通过useParams拿到。
你URL中?后面拼接的是查询字符串参数（Search Params），不属于路径匹配的段内容，本来就不会出现在useParams的返回结果里。
你通过表单GET方式提交跳转搜索页的实现完全符合Web原生规范，不需要修改表单的action配置，这种写法天然支持浏览器后退/刷新保留搜索状态、无JS环境兼容，比手动拦截表单提交写跳转逻辑的方案更合理。

正确获取方式

根据你使用的React Router版本选择对应写法即可：

React Router v6（当前主流版本）

使用官方提供的useSearchParams hook直接读取查询参数：

// 引入hook
import { useSearchParams } from 'react-router-dom';

function SearchResultPage() {
  // 调用hook获取查询参数对象
  const [searchParams] = useSearchParams();
  // 通过get方法读取指定key的参数值
  const searchKeyword = searchParams.get('q');

  return (
    <div>
      <h1>搜索结果</h1>
      <p>当前搜索关键词：{searchKeyword}</p>
    </div>
  )
}

React Router v5 旧版本

使用useLocation拿到URL的查询字符串部分，再通过原生URLSearchParams解析即可：

// 引入hook
import { useLocation } from 'react-router-dom';

function SearchResultPage() {
  const location = useLocation();
  // location.search就是?开头的查询字符串，直接传入解析
  const searchParams = new URLSearchParams(location.search);
  const searchKeyword = searchParams.get('q');

  return (
    <div>
      <h1>搜索结果</h1>
      <p>当前搜索关键词：{searchKeyword}</p>
    </div>
  )
}