Get the router return path in the details using reducex ownProps

Question

I am trying to get the current path of the responsive router in the container in order to pass it to the child component, which will change its visibility filter.

In particular, I'm trying to make the navigation menu highlight the current active page.

I use reaction, reduction, reaction-router and relay-relay, so I can access the state of the router from the redux store.

The docs for react-router-redux say that it does something like this:

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

Here is my container component:

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)

In the NavMenu component, the semantic-ui menu component compares activePathwith its own path and highlights the active button.

, , ; , @@router/LOCATION_CHANGE. redux dev . mapStateToProps , .

? , shouldComponentUpdate, , , .

Answer 1

, . answer-router-redux docs,

Redux. , React Router ( , ), Redux. , React Router, , .

, , . response-router-redux, , (, React Router Route). React Router .

MenuBar . :

• , MenuBar, .
• React Router Router 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 , .