2016-06-23 6 views
5

특정 메뉴 항목의 스타일을 결정하려면 내 탐색 구성 요소에서 현재 경로를 가져 오려고합니다.반응 구성 요소의 현재 경로 얻기

나는 일반적인 용의자 중 일부를 이미 시도했지만 어떤 결과도 얻을 수 없습니다. 특히 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; 
+0

에 대한 추가 정보입니다 내가 corrent하고있는 경로를 얻을 수 있나요? –

+1

하위 트리의 모든 구성 요소에 http://jsfiddle.net/3yLn5qzc/11/ – QoP

+0

@AnnaMelzer 라우터 코드를 공유해주세요. – Gardezi

답변

10

라우터에 구성 요소를 추가 첫째

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

당신은

this.props.location.pathname 

단지 직접 아이에게 상황을 전달할 것 같이 보인다 @QoP이, 위치

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

+4

내가 말했던 것처럼'this.props.location'은 undefined를 반환하므로'this.props.location.pathname'는 arror를 던집니다. –

+0

라우터에 구성 요소를 추가해야합니다 –