使用 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

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

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

正如他们在 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.

所以您引用的文档对您使用的版本无效。

您的实现没有任何问题，您可以通过 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

获取参数

使用 react-router-redux 访问参数

Accessing params with react-router-redux

javascript

reactjs

redux

react-router-redux