To determine the style of a particular menu item, I am trying to get the current path in my navigation component.
I have already tried some of the usual suspects, but cannot get any results. Especially those properties that I thought would be injected through React are missing.
this.props.location returns undefined
this.props.context returns undefined
I am using react 15 , redux 3.5 , react-router 2 , react-router-redux 4
import React, {Component, PropTypes} from 'react'; import styles from './Navigation.css'; import NavigationItem from './NavigationItem'; class Navigation extends Component { constructor(props) { super(props); } getNavigationClasses() { let {navigationOpen, showNavigation} = this.props.layout; let navigationClasses = navigationOpen ? styles.navigation + ' ' + styles.open : styles.navigation; if (showNavigation) { navigationClasses = navigationClasses + ' ' + styles.collapsed; } return navigationClasses; } render() { let navigationClasses = this.getNavigationClasses(); return ( <div className={navigationClasses} onClick={this.props.onToggleNavigation} > {/* Timeline */} <NavigationItem linkTo='/timeline' className={styles.navigationItem + ' ' + styles.timeline} displayText='Timeline' iconType='timeline' /> {/* Contacts */} <NavigationItem linkTo='/contacts' className={styles.navigationItem + ' ' + styles.contact + ' ' + styles.active} displayText='Contacts' iconType='contacts' /> </div> ); } } Navigation.propTypes = { layout: PropTypes.object, className: PropTypes.string, onToggleNavigation: PropTypes.func }; export default Navigation;
source share