Accessing params with react-router-redux

Question

I'm using react-router-redux (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)

installed with

npm install --save react-router-redux@next

implemented like so:

<Route path='/resource/:id' component={Resource}/>

I'm trying to access the parameter for the id in the container, like so:

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps)
  return {...state.resource, id: ownProps.params.id}
}

As shown in the react-router-redux docs.

I'm getting an error stating that ownProps.params is undefined however. So this works:

const mapStateToProps = (state, ownProps) => {
  return {...state.resource, id: ownProps.match.params.id}
}

When I log ownProps, however, I find that ownProps.match.params.id contains the id I require.

Is this a change in implementation or have I implemented the route wrong? Thanks

Can you link to the react-router-redux docs where it says that? `Route`s have always been passed three props, `match`, `location`, and `history`. — Andrew Li, Apr 24 '17 at 00:07
https://github.com/reactjs/react-router-redux: function mapStateToProps(state, ownProps) { return { id: ownProps.params.id, filter: ownProps.location.query.filter }; } — zoopz, Apr 24 '17 at 00:08

score 17 · Answer 1 · answered Mar 22 '18 at 13:19

17

I know that it's already closed question, but I think it would be helpful info for someone else

I'm using the same version and here is my solution for the task of getting params when you don't have access to match:

import { createMatchSelector } from 'react-router-redux';

const { params } = createMatchSelector({ path: '/resource/:id' })(state);

console.log(params.id);

I'm using it in a redux-saga, not in the component. And for your situation, it would be better to use react-router props and get params from props.match.params.id

answered Mar 22 '18 at 13:19

Kate Lizogubova

193
1
5

Thank you! I am also using `redux-saga` and need to access route props – coolboyjules Mar 30 '18 at 19:35
Thank you so much! – tpsilva Aug 27 '18 at 17:18
Since it's beta version there are no docs. So source code for the rescue :) – Kate Lizogubova Oct 22 '18 at 09:31

score 6 · Accepted Answer · answered Apr 24 '17 at 06:02

npm install --save react-router-redux@next

With above command, you probably have installed an alpha version of react-router-redux 5 and you are using it with react-router v4.

As they have mention in https://github.com/reactjs/react-router-redux readme, react-router-redux version 5 is currently being actively developed in somewhere else.

This repo is for react-router-redux 4.x, which is only compatible with react-router 2.x and 3.x

The next version of react-router-redux will be 5.0.0 and will be compatible with react-router 4.x. It is currently being actively developed over there.

So the documentation you are referring isn't valid for the version you are using.

There is nothing wrong in your implementation and you can continue to access params via match of ownProps.

Accessing params with react-router-redux

2 Answers2