使用redux ownProps获取道具中的react路由器路径

Question

我试图在一个容器中获取反应路由器的当前路径，这样我就可以将其传递给一个子组件，该组件将更改它的可见性过滤器。

更具体地说，我试图使导航菜单突出当前活动的页面。

我正在使用redux、redux、react-router和react-router-redux，这样我就可以从redux存储访问路由器状态。

从react-router-redux的docs中，它说要做这样的事情：

function mapStateToProps(state, ownProps) {
  return {
    id: ownProps.params.id,
    filter: ownProps.location.query.filter
  };
}

以下是我的容器组件：

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import {
  Segment as UISegment,
} from 'semantic-ui-react'
import NavMenu from '../components/NavMenu'

class MenuBar extends Component {
  static propTypes = {
    path: PropTypes.string.isRequired
  }

  render() {
    const { path, } = this.props

    return (
      <UISegment>
        <NavMenu activePath={path} />
      </UISegment>
    )
  }
}

const mapStateToProps = (state, ownProps) => {   
  return {
    path: ownProps.route ? ownProps.route.path : "/"
  }
}

export default connect(mapStateToProps)(MenuBar)

在NavMenu组件中，一个Semative-ui菜单组件将比较activePath和它自己的路径，并突出显示活动按钮。

在理论上，一切似乎都是可行的；当我单击菜单的不同部分时，将发出一个@@router/LOCATION\u CHANGE操作。在redux开发工具中，我看到状态发生了变化。但是，MapStateTops永远不会被调用，并且这个组件永远不会被重新渲染。

有什么想法吗？我曾考虑过使用react方法，如shouldComponentUpdate，但react似乎甚至没有意识到状态或道具正在改变。

Answer 1

首先要注意的是，您实际上不是从商店访问路由器状态。如果你看一下report-router-redux文档，它实际上警告你不要这样做

您不应该直接从Redux商店读取位置状态。这是因为React路由器以异步方式运行（以处理动态加载的组件），并且您的组件树可能尚未与您的Redux状态同步更新。您应该依赖React路由器传递的道具，因为它们只有在处理完所有异步代码后才会更新。

您的容器正在从ownProps读取数据，ownProps只是传递到该容器组件中的props。您正在引用的react router redux文档中的示例仅适用于顶级路由组件（作为组件道具传递给react router路由组件的组件）。React路由器将路由器数据传递到所有路由组件。

在您的情况下，菜单栏是顶级管线组件的子级。你的两个选择是

1. 将所需数据从路由组件向下传递到菜单栏

另外，我相信你所寻找的价值是自己的道具。地方路径名而不是ownProps。路线路径

选项1的一些代码，因为我假设MenuBar在组件树中没有嵌套得太深：

如果你的路由配置是

<Router history={browserHistory}>
  <Route path="/" component={AppLayout}>
    <Route path="about" component={About}/>
    <Route path="users" component={Users}/>
    <Route path="*" component={NoMatch}/>
  </Route>
</Router>

你的申请会是这样的

const AppLayout = ({ children, location }) => {
  return (
    <div>
      <MenuBar path={ location.pathname } />
      { children }
    </div>
  )
} 

MenuBar将收到您正在寻找的数据。