Reputation: 47
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