get id from url params react.js

Question

i'm triyng to get the id from url params i'm using in react.js. This is my code

componentDidMount() {
    let {id} = this.props.params
}

but i get undefined, i console loged params and i get an empty array

how can i get the param?

this is the router code

<BrowserRouter>
    <Navbar />
      <Switch>
        <Route exact path="/" component={home} ></Route>
        <Route exacth path="/details/:id" component={details} />
      </Switch>
</BrowserRouter>

Try using withRouter react-router HOC to connect to the passed router object to the component and do a lot of other things. — Ali Torki
– Ali Torki, Commented Mar 30, 2020 at 18:35
Have you had a chance to review the documentation for Route? It looks like the following props are exposed match, location, history at the base level. — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 30, 2020 at 18:35
Where is that componentDidMount located? Is it inside the details component? — Juan Marco
– Juan Marco, Commented Mar 30, 2020 at 21:35

Zenocode · Accepted Answer · 2020-03-30 18:34:53Z

4

According to https://stackoverflow.com/a/45069909/6809926, you will be able to access your id using this.props.match.params instead of this.props.params:

componentDidMount() {
    let {id} = this.props.match.params
}

answered Mar 30, 2020 at 18:34

Zenocode

7128 silver badges20 bronze badges

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

2 Comments

Matthew Seidel Over a year ago

i get this error TypeError: Cannot read property 'params' of undefined it seems i'm getting props as an empty array

Zenocode Over a year ago

In your Route you write : exacth instead of exact could be something ? Also did you try to just print this.props to see its content ?

Scott Fraser · Accepted Answer · 2020-03-30 18:35:50Z

0

Try

componentDidMount () {
    const { id } = this.props.match.params
}

see https://tylermcginnis.com/react-router-url-parameters/

answered Mar 30, 2020 at 18:35

Scott Fraser

313 bronze badges

Comments

adamicska · Accepted Answer · 2021-11-11 19:06:58Z

0

componentDidMount () {
        const { id } = this.props.match.params.id
    }

console.log(id) brings back the id alright in my case. Without the .id, I get an object.

answered Nov 11, 2021 at 19:06

adamicska

1

Collectives™ on Stack Overflow

get id from url params react.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related