How to send value with route - reactjs

Question

this is my route:

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

then this is my url:

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

inside my AboutCards component:

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

but it print a undefined

RIYAJ KHAN · Accepted Answer · 2019-01-19 06:08:45Z

1

this.props.match.params will gives only url params and not query params.

Use this.props.location.search.It will gives you ?id=1. Do some processing to get id.

In modern browsers that support 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

answered Jan 19, 2019 at 6:08

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1