How to get URL value in React.js?

Question

I have this URL and a component that renders here. I want to get 'id' from here: localhost:8080/restaurants/2/feedback. How to get value of id '2' in feedback controller that is gonna be rendered? Here is how it is written in code link

<Route path="/restaurants/:id/feedback" component={Feedback} />

EDITED:

  async componentDidMount() {
    const { id } = this.props.params.id;
    const data = await Api.getAllRestaurantFeedback('feedback?restaurantId=', id);
... 
...

Feedback.propTypes = {
  id: PropTypes.string.isRequired,
};

I have a warning here: ESLint: 'params.id.id' is missing in props validation(react/prop-types)

Does this answer your question? [React - How to get parameter value from query string](https://stackoverflow.com/questions/35352638/react-how-to-get-parameter-value-from-query-string) — Anurag Srivastava, Mar 31 '20 at 08:16

score 0 · Answer 1 · answered Mar 31 '20 at 08:17

0

Inside feedback you have match property. You can use it to get id. It is inside match.params as id most probably

answered Mar 31 '20 at 08:17

Lazar Nikolic

4,261
1
22
46

score 0 · Answer 2 · answered Mar 31 '20 at 08:22

0

Try wrapping your component inside withRouter and then access the necessary params via its props . Something like this.props.match.params.id

import React from 'react'
import { withRouter } from 'react-router'

class Dummy extends React.Component {

  render() {
    const { match } = this.props

    return (
      <div>Value of id {match.params.id}</div>
    )
  }
}

export default withRouter(Dummy);

answered Mar 31 '20 at 08:22

joy08

9,004
8
38
73

do i really need withRouter when I use simple Route everywhere in app? – Robert Gurjiev Mar 31 '20 at 08:34
check the question, please, after EDITED – Robert Gurjiev Mar 31 '20 at 08:36

How to get URL value in React.js?

2 Answers2