Get current path in response component

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() { /* TODO: get pathname for active marker */ 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; 
+5
source share
1 answer

First add your component to the router

 <Router path="/" component={Navigation} /> 

You can get your way in

 this.props.location.pathname 

This is a readme for location

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

+10
source

All Articles