Question

使用 react-router-redux 访问参数

2017-04-24

12866

javascript reactjs redux react-router-redux

我正在使用 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

我知道这已经是一个封闭的问题，但我认为这对其他人会很有帮助

我使用的是相同的版本，当您无权访问 match 时，这是我针对获取参数的任务的解决方案：

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

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

console.log(params.id);

我在 redux-saga 中使用它，而不是在组件中。对于您的情况，最好使用 react-router props 并从 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 readme 中提到的那样， react-router-redux 版本 5 目前正在其他地方积极开发中。

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 。