web-dev-qa-db-ja.com

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

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

私はすでに通常の容疑者のいくつかを試しましたが、結果を得ることができません。特に、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;
reactjsreact-routerreact-router-redux
12
Anna Melzer

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

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

あなたのパスを取得することができます

this.props.location.pathname

これは場所のreadmeです

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

17
Philip Moniaga