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 docs所示。

我收到一条错误，指出ownProps.params是未定义的。所以这有效：

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

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

这是实施方面的改变还是我实施了错误的路线？感谢

Answer 1

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

我使用相同的版本，这是我无法访问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获取参数

Answer 2

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中积极开发。

此repo用于react-router-redux 4.x，它只与。兼容   react-router 2.x和3.x

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

因此，您所指的文档对您使用的版本无效。

您的实施没有任何问题，您可以继续通过我们自己的params访问match。

使用react-router-redux访问参数

2 个答案: