REACT router cannot access params when using render()

Question

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.

which <Route> are you using <BrowserRouter> , share your index.js? — Aaqib
– Aaqib, Commented Nov 17, 2017 at 19:18

azium · Accepted Answer · 2017-11-17 19:18:50Z

5

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)}/>

answered Nov 17, 2017 at 19:18

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

1 Comment

julian soro Over a year ago

Thanks for this awesome answer with multiple ways of wiring react-router with react-redux. I can't believe this isn't more obvious in the docs...

Collectives™ on Stack Overflow

REACT router cannot access params when using render()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related