如何通过路线来传递价值-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)

但它会显示undefined

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