使用react-router-redux访问参数

Question

我正在使用react-router-redux(https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)

安装

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

像这样实现:

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

我正在尝试访问容器中id的参数,如下所示:

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

如react-router-redux文档中所示.

我收到一个错误,说明ownProps.params是未定义的.这样可行:

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

但是,当我记录ownProps时,我发现ownProps.match.params.id包含我需要的id.

这是实施中的变化还是我实施了错误的路线？谢谢

Answer 1

我知道它已经是封闭的问题,但我认为这对其他人来说是有用的信息

我正在使用相同的版本,这是我无法访问时获取params任务的解决方案match:

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

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

console.log(params.id); 

我在a中使用它redux-saga,而不是在组件中使用它.对于你的情况,最好使用react-router道具并从中获取参数props.match.params.id

Answer 2

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

使用上面的命令,您可能已经安装了alpha版本react-router-redux5,并且您正在使用react-router v4.

正如他们在https://github.com/reactjs/react-router-redux自述文件中提到的那样,react-router-redux版本5目前正在其他地方积极开发.

这个repo用于react-router-redux 4.x,它只与react-2.x和3.x兼容

react-router-redux的下一个版本将是5.0.0,并将与react-router 4.x兼容.它目前正在那里积极开发.

因此,您引用的文档对您使用的版本无效.

您的实现没有任何问题,您可以继续params通过matchownProps 访问.