传递多个参数作为捕获它们

Question

我正在尝试通过添加 'id' 和 'type' 在 URL 中传递 'slug'。

代码：

`/${category.slug}?cid=${category._id}&type=${category.type}`   
 <Route path="/:slug" element={<ProductListPage />} />

URL

http://localhost:3000/Samsung-3whQlbAYpm?cid=61ed050cab3efd275d49efd6&type=store

问题：但是，在 useParam() 中，我只收到 slug 而不是 'cid' 和 'type'

等附加参数

例如，

let params = useParams();

它的参数只有 'slug' 值，即 'Samsung-3whQlbAYpm'

如何获得附加值？

Answer 1

useParams 钩子只会从 URL 的路径部分获取定义的路由参数。如果要访问 queryString，请使用 react-router-dom.

中的 useSearchParams 挂钩

const [searchParams] = useSearchParams();

const cid = searchParams.get("cid");
const type = searchParams.get("type");

如果您碰巧仍在使用 react-router-dom v5，则使用 location 对象获取要传递给 URLSearchParams 构造函数的 search 字符串。

const { search } = useLocation();
const searchParams = new URLSearchParams(search);

Passing Multiple parameters as catch them