如何在react router V6中获取URL参数？

Question

我有一个这样的网址：

"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>

上面的代码也不起作用。

Answer 1

鉴于：

• URL路径

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

• 路线

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

要让

ComponentA

访问 queryString 参数，应该导入并使用从 useSearchParams

 导出的 

react-router-dom@6 钩子。

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

const ComponentA = () => {
  const [searchParams] = useSearchParams();

  const type = searchParams.get("type"); // "text"
  const c = searchParams.get("c");       // "$something"
  const cc = searchParams.get("cc";      // "$something"

  ...

};