webentwicklung-frage-antwort-db.com.de

Ruft den aktuellen Pfad in einer Reaktionskomponente ab

Um den Stil eines bestimmten Menüelements zu bestimmen, versuche ich, den aktuellen Pfad in meiner Navigationskomponente abzurufen.

Ich habe bereits einige der üblichen Verdächtigen ausprobiert, kann aber keine Ergebnisse erzielen. Insbesondere Eigenschaften, von denen ich dachte, dass sie über React) injiziert werden, sind nicht vorhanden.

this.props.location gibt undefined zurück

this.props.context gibt undefined zurück

Ich benutze 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;
12
Anna Melzer

Fügen Sie Ihre Komponente zuerst dem Router hinzu

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

Sie können Ihren Weg in bekommen

this.props.location.pathname

Dies ist eine Readme-Datei für den Standort

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

17
Philip Moniaga