Ruft den aktuellen Pfad in einer Reaktionskomponente ab

Question

Um das Styling eines bestimmten Menüelements zu bestimmen, versuche ich den aktuellen Pfad in meiner Navigationskomponente zu ermitteln.

Ich habe einige der üblichen Verdächtigen bereits versucht, kann aber keine Ergebnisse erhalten. Vor allem Eigenschaften, von denen ich dachte, dass sie über React injiziert würden, sind nicht vorhanden.

this.props.location kehrt undefined

this.props.context kehrt undefined

I react 15 verwenden, 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

Fügen Sie Ihre Komponente zuerst an den Router

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

Sie können Ihren Weg in

this.props.location.pathname 

Dies ist eine Readme-Datei Standort

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