如何在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

鉴于：

• 网址路径"/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"

  ...

};