React Router V6中如何获取URL查询参数？

问题描述 #

我的URL示例如下：

"http:something/forget/reset?type=text&c=$something&cc=$something"

我想要获取该路径中的参数，使用了如下代码：

const params = useParams()

但它返回空对象{}。
当前我的路由配置如下：

<Route
  path="forget/reset"
  element={<ComponentA/>}
/>

我是否需要像下面这样定义带参数的路由？或者有没有方法可以从URL中获取多个参数？

<Route path="forget" element={<ComponentA/>}>
  <Route
    path="forget/reset/:user/:c/:cc"
    element={<ComponentA/>}
  />
</Route>

上述代码同样无法生效。

问题原因 #

useParams()是用来获取路由路径参数的（即URL中/xxx/:param这种冒号声明的参数），而你URL里的?type=text&c=$something&cc=$something属于查询参数，两者不是同一类型，所以用useParams()拿不到数据。你后来修改的路由配置也不对——既把查询参数错误当成路径参数定义，嵌套路由的路径还重复了父路由前缀，自然无法生效。

正确解决方案 #

要获取URL中的查询参数，React Router提供两种常用方式：

1. 使用useSearchParams（推荐）

这是React Router v6专门为查询参数设计的Hook，用法如下：

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

function ComponentA() {
  const [searchParams] = useSearchParams();
  
  // 获取单个参数
  const type = searchParams.get('type');
  const c = searchParams.get('c');
  const cc = searchParams.get('cc');
  
  // 一次性获取所有参数并转为对象
  const paramsObj = Object.fromEntries(searchParams);
  console.log(paramsObj); // { type: 'text', c: '$something', cc: '$something' }
  
  return <div>...</div>;
}

2. 使用useLocation手动解析

如果需要自定义解析逻辑，可以用useLocation拿到查询字符串后自行处理：

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

function ComponentA() {
  const location = useLocation();
  
  // 原生API解析查询参数
  const params = Object.fromEntries(new URLSearchParams(location.search));
  
  console.log(params); // { type: 'text', c: '$something', cc: '$something' }
  
  return <div>...</div>;
}

路由配置说明 #

你最初的路由配置path="forget/reset"是正确的，不需要改成带:user/:c/:cc的形式——因为这些参数不是URL路径的一部分，而是查询参数。如果硬要改用路径参数，URL需要调整为http:something/forget/reset/text/$something/$something，同时路由配置写成path="forget/reset/:type/:c/:cc"，但这不符合你当前的URL结构。

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