reactjs - 反应路由器没有得到查询参数

Question

我正在尝试将强制url 参数与 react-router v3 (3.2.6) 匹配，但似乎没有得到它们。网址如下：

de/something?color=red&type=square

我尝试对路由进行的匹配如下：

<Route path='de/something?color=:color&type=:type' ... />

当我记录它时，它似乎得到了params（颜色和类型），但值为undefined. 我正在直接记录ownProps.params来自路由器的日志。

我不确定为什么它可以看到参数在那里但看不到它的价值。我定义错了什么？

我知道我可以从位置本身获取查询参数，但我想直接匹配这些查询参数，因为此 url 必须具有这 2 个参数。还有一个免责声明，我无法升级到路由器版本 4 或 5。

提前致谢。

更新：当我使参数可选时：

<Route path='de/something(?color=:color&type=:type)' ... />

我至少可以到达网址，但颜色和类型值未定义。

标签： reactjsreact-routerquery-parameters

Answer 1

在为您的路线渲染的组件上 -'de/something?color=:color&type=:type'

您可以将 searchParams 设置为

// pass the search params from the location prop provided by react router
// to URLSearchParams constructor

const searchQuery = new URLSearchParams(props.location.search);

// use the inbuilt methods to get the value for your searchQuery
const color = searchQuery.get("color");
const type = searchQuery.get('type');

参考

使用 URLSearchParams 获取搜索查询