reactjs - 使用 redux ownProps 获取 props 中的 React 路由器路径

Question

我正在尝试获取容器中 react 路由器的当前路径，以便我可以将其传递给子组件，该子组件将更改其可见性过滤器。

更具体地说，我正在尝试使导航菜单突出显示当前事件的页面。

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

来自 react-router-redux 的文档，它说要做这样的事情:

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 组件内，semantic-ui 菜单组件会将 activePath 与其自己的路径进行比较，并突出显示事件按钮。

理论上一切似乎都有效；当我单击菜单的不同部分时，会发出 @@router/LOCATION_CHANGE 操作。在 redux 开发工具中，我看到状态发生了变化。但是，mapStateToProps 永远不会被调用，并且该组件永远不会重新渲染。

有什么想法吗？我考虑过使用像 shouldComponentUpdate 这样的 React 方法，但似乎 React 甚至没有意识到状态或 props 正在改变。

Answer 1

首先要注意的是，您实际上并未从存储中访问路由器状态。如果你看react-router-redux docs ，它实际上警告不要这样做

You should not read the location state directly from the Redux store. This is because React Router operates asynchronously (to handle things such as dynamically-loaded components) and your component tree may not yet be updated in sync with your Redux state. You should rely on the props passed by React Router, as they are only updated after it has processed all asynchronous code.

您的容器正在从 ownProps 读取数据，这只是传递到该容器组件中的 props。您引用的react-router-redux文档中的示例仅适用于顶级路由组件(作为组件属性传递给React Router Route组件的组件)。 React Router 将路由器数据传递到所有路由组件中。

就您而言，MenuBar 是您的顶级路由组件的子级。您的两个选择是

1. 将所需的数据从路由组件传递到 MenuBar。
2. 使用 React Router 的 withRouter 高阶组件将值注入(inject)到 MenuBar https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#withroutercomponent-options

另外，我相信您正在寻找的值是 ownProps.location.pathname 而不是 ownProps.route.path

选项 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>

你的AppLayout会是这样的

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

并且 MenuBar 将接收您正在查找的数据。