CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-props
Arun
Arun

Reputation: 35

REACT router cannot access params when using render()

I am new to redux, I created a route to navigate to user edit page and i also want to pass store and history as props using the code below.

<Route path="/edit/:id" render={({history}) => (
          <EditUser store={store} history={history} />
)}/>

But now i cannot access the params which i am passing (:id) in my EditUser component. When i try to access using this.props.match.params.id, it shows undefined, but it works if i rewrite my route to 

<Route path="/edit/:id" component={EditUser}/>

But now i think case i am not able to pass other props.

Help much appreciated.

Upvotes: 3

Views: 728

Answers (1)

azium
azium

Reputation: 20634

If you want to use match you have to pass it to your component.

<Route path="/edit/:id" render={({history, match}) => (
  <EditUser store={store} history={history} match={match} />
)}/>

You could also just pass all the props:

<Route path="/edit/:id" render={props => (
  <EditUser store={store} {...props} />
)}/>

Or you can use react-redux's connect function to get access to the store

<Route path="/edit/:id" component={connect(mapStateToProps)(EditUser)}/>

Upvotes: 5

Related Questions