反应路由器没有从请求中获取数据，例如 path= "/products?category=:category"

Question

我使用的是react路由器dom。我有这种路线：

<Route exact path="/products?category=:category" component={Catalog} />

但我没有得到：目录页上的类别。尝试用以下代码捕获数据：

const params: { category: any } = useParams();
const category = params.category;

Answer 1

您得到的是一个URL查询。使用useLocation()获取

const query = new URLSearchParams(useLocation().search);
const category = query.get("category") ;

Answer 2

您可以从react-router-dom:使用useLocation挂钩

import {useLocation} from "react-router-dom";
export default function Catalog() {
const search = useLocation().search;
const category = new URLSearchParams(search).get('category');
return (
<h1>{ category }</h1>
);
}

Answer 3

在一个名为search的对象中，查询字符串作为第二个参数传递给组件。

路由器：

<Route exact path="/products" component={Catalog} />

组件：

const Catalog = ({ match, params }) => {
return (
<div>
Query Params: {params.search}
</div>
);
};