Reactjs React路由器未从请求获取数据，如path="/产品？类别=：类别；

我正在使用路由器dom。 我有这样的路线：

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

---

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

路由器：

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

组成部分：

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

const Catalog=（{match，params}）=>{
返回(
查询参数：{Params.search}
);
};

您得到的是一个URL查询。使用

useLocation（）

---

您可以使用

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>
  );
}

从“react router dom”导入{useLocation}；
导出默认函数目录（）{
const search=useLocation（）.search；
const category=新的URLSearchParams（search.get（'category'）；
返回(
{类别}
);
}

谢谢！什么是搜索？它在params中来自何处？@Oleg

自动将此参数传递给渲染组件。看一看：“搜索”是URL接口的内置属性，还有“路径”，而不仅仅是特定的反应。您可以在这里了解更多信息：CategoryResact路由器的设置为null不支持查询参数的动态值。因此，

路由

的定义应类似于：

，然后您可以传递任何带有任何值的查询参数，如：

products？category=shirt

，然后您可以按照上述代码从组件获取查询参数的值

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

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>
  );
}