Pobierz bieżącą ścieżkę w komponencie reagowania

Question

Aby określić styl określonego elementu menu, próbuję uzyskać bieżącą ścieżkę w moim komponencie Nawigacja.

Próbowałem już kilku zwykłych podejrzanych, ale nie mogę uzyskać żadnych wyników. Zwłaszcza właściwości, które myślałem, że zostaną wstrzyknięte za pośrednictwem React, nie istnieją.

this.props.location powraca undefined

this.props.context zwraca undefined

używam 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; 

Answer 1

Dodaj komponent do routera pierwszy

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

można uzyskać ścieżkę

this.props.location.pathname 

To readme dla lokalizacji

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