Récupère le chemin courant dans un composant React

Question

Pour déterminer le style d'un élément de menu spécifique, j'essaie d'obtenir le chemin actuel dans mon composant de navigation.

J'ai déjà essayé certains des suspects habituels, mais je ne peux obtenir aucun résultat. Surtout les propriétés que je pensais être injectées via React ne sont pas là.

this.props.location renvoie undefined

this.props.context renvoie undefined

J'utilise 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

Ajoutez d'abord votre composant au routeur

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

Vous pouvez obtenir votre chemin

this.props.location.pathname

Ceci est un readme pour l'emplacement

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