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;
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