Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing params with react-router-redux

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

like image 480
zoopz Avatar asked Apr 24 '17 00:04

zoopz


People also ask

How do I get query params in react router?

To get the query parameter from a above url, we can use the useLocation() hook in react router v5. In the above code, we first imported the useLocation() hook from the react-router-dom package and invoked it inside the Items functional component then we parsed the query param data using the new URLSearchParams().

How do you grab URL parameters from within a component using react router?

Using React Router, when you want to create a Route that uses a URL parameter, you do so by including a : in front of the value you pass to Route 's path prop. Finally, to access the value of the URL parameter from inside of the component that is rendered by React Router, you can use React Router's useParams Hook.

Can I use Redux with react router?

You can use the connected-react-router library (formerly known as react-router-redux ). Their Github Repo details the steps for the integration. Once the setup is complete, you can now access the router state directly within Redux as well as dispatch actions to modify the router state within Redux actions.

How do you access URL parameters using react router 6?

Here's an example custom withRouter HOC: const withRouter = WrappedComponent => props => { const params = useParams(); // etc... other react-router-dom v6 hooks return ( <WrappedComponent {... props} params={params} // etc... /> ); };


1 Answers

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

like image 65
Kate Lizogubova Avatar answered Sep 28 '22 00:09

Kate Lizogubova