markus paterson
markus paterson

Reputation: 47

ReactJS Match props not being passed to component

I have a route like this

Dashboard.js

<Route path="/dashboard/:user_id" render={(props) =>  <Profile user={this.props.user} {...this.props}/>}/>

as you can see i am passing the props of Dashboard component to Profile Component, On react documentation when you pass the props the match Object is also passed I want to access the match object from the Profile

But i get undefined on Profile component when accessing match.params

componentDidMount(){
   console.log(this.props.match.params) // Undefined
}

When i check the react dev tools the Profile component indeed didn't received the match object but when i check the route in react dev tool there is the match.params with the current parameter

From React Dev tools

the <Route/> line gives me this

Props
 path: "/dashboard/:user_id"
 render: render()
State
 match: {…}
   isExact: true
   params: {…}
     user_id: "5af13d60f3957c11e46510ad"
   path: "/dashboard/:user_id"
   url: "/dashboard/5af13d60f3957c11e46510ad"

As you can see match is present

While the Profile component doesn't have the params

match: {…}
 isExact: true
 params: {…}
    Empty object
 path: "/dashboard"
 url: "/dashboard"

Upvotes: 2

Views: 3031

Answers (1)

Flopi
Flopi

Reputation: 116

In Profile component try to change {...this.props} to {...props}

Upvotes: 2

Related Questions