React Router - pass path id to onEnter function

Question

I was previously using React Routers URL params to filter an array of content and return the specific content I wanted (filtered by ID). I have now been supplied with a separate API which means I no longer have to return all content and then filter through it, instead I can make one call and return that specific items data.

To make the call on page load I would need to access the id on the Route onEnter function. Is it possible to use a URL param on this onEnter function, and if not - would firing the dispatch function from the container component be the obvious solution?

<Route
  path={'locker/my-content/:id'}
  component={ManageContentPage}
  onEnter={() => { store.dispatch(loadMyContent(// NEED ID HERE)); }}
/>

score 1 · Answer 1 · answered Aug 09 '17 at 11:55

1

You can access URL params through onEnter function's argument nextState. Here's an example: React-router - how to use route params in onEnter?

answered Aug 09 '17 at 11:55

kalacs

36
2

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

If you're using react-router 4+, then the onEnter prop no long exists, and you'll have to use the render prop to achieve similar functionality.

For react-router < 4

Any function passed to onEnter will take nextState as its argument. This state object will contain your params

So to access this value, you'd need something like the following:

<Route
  path={'locker/my-content/:id'}
  component={ManageContentPage}
  onEnter={(nextState) => { store.dispatch(loadMyContent(nextState.params.id)); }}
/>

React Router - pass path id to onEnter function

2 Answers2

For react-router < 4