在 match.params 中看不到路由参数

Question

当我为类别选择家具并为城市选择“San Jose, CA, USA”时，下面的推送会将 URL 重定向到 http://localhost:3000/search?category=furniture&city=San+Jose%2C+CA%2C+USA。

    this.props.history.push({
      pathname: '/search',
      search: "?" + new URLSearchParams({category: this.category, city: this.userCity}).toString()
    });

在 App.jsx 中，我定义了如下路由：

<Route path="/search/:category?/:city?" component={props => <EventSearchPage {...props} />}/>

在EventSearchPage 组件中，当我尝试访问this.props.match.params 时，我看到类别和城市都是undefined。

谁能告诉我哪里出错了？谢谢！

Answer 1

发现 queryString 可以像下面这样获取 URL 参数：

queryString.parse(this.props.location.search)

npm 包链接在这里：https://www.npmjs.com/package/query-string

Answer 2

当使用 react router 给路由添加参数时，可以这样做，以便将它们提供给组件。

this.props.history.push({
  pathname: `/search/${this.category}/${this.userCity}`,
});

路由组件看起来像这样来接收这些参数。

<Route path="/search/:category?/:city?" component={props => <EventSearchPage {...props} />}/>

react 路由器的文档可以在here找到