使用react-router-redux访问params

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

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

通过上面的命令，您可能已经安装了react-router-redux 5的alpha版本，并且您正在将其与react-router v4一起使用。

正如他们在https://github.com/reactjs/react-router-redux自述文件中提到的，react-router-redux版本5目前正在somewhere else中积极开发。

此存储库用于react-router-redux 4.x，它仅与react-router 2.x和3.x兼容

react-router-redux的下一个版本将是5.0.0，并将与react-router 4.x兼容。它目前正在over there上积极开发。

，因此您引用的文档对于您正在使用的版本无效。

您的实现没有任何问题，您可以继续通过ownProps的match访问params。

Answer 2

我知道这个问题已经结束了，但我认为这对其他人来说是有帮助的信息

我使用的是相同的版本，以下是我的解决方案，用于在您无法访问match时获取参数

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

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

console.log(params.id); 

我在redux-saga中使用它，而不是在组件中。对于您的情况，最好使用react-router属性并从props.match.params.id获取参数