反応コンポーネントの現在のパスを取得する

Question

特定のメニュー項目のスタイルを決定するために、ナビゲーションコンポーネントで現在のパスを取得しようとしています。

私はすでに通常の容疑者のうちのいくつかを試しましたが、結果は得られません。特に、私がReactを介して注入すると考えられるプロパティは存在しません。

this.props.location戻りundefined

this.props.context戻り、私が使用しundefined

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

ルータにコンポーネントを追加します。最初の

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

あなたは

this.props.location.pathname 

であなたのパスを取得することができますこれは、場所

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