如何使用路由发送值 - reactjs

Question

这是我的路线：

<Route path="/about-cards/:id?" component={AboutCards} />

那么这是我的 url:

http://localhost:3000/about-cards?id=1

在我的 AboutCards 组件中：

  componentDidMount() {
    console.log('this.props.match.params.id',this.props.match.params.id)

但它打印出 undefined

Answer 1

this.props.match.params 将只给出 url 参数而不是查询参数。

使用this.props.location.search。它会给你?id=1。做一些处理得到 id.

在支持 URL API,it can be achived using URLSearchParams 的现代浏览器中。

let queryParams = new URLSearchParams(this.props.location.search);

queryParams.get('id'); //instead id,one can query param name.
// will give 1

How to send value with route - reactjs