javascript - 如何使用路由发送值-reactjs

Question

这是我的路线:

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

那么这是我的网址:

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

在我的 AboutCards 组件中:

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

但它打印出一个未定义

Answer 1

this.props.match.params 将仅提供 url 参数，而不提供查询参数。

使用this.props.location.search。它会给你?id=1。 进行一些处理以获取id。

在支持 URL API 的现代浏览器中，可以使用 URLSearchParams 来实现.

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

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