为了确定特定菜单项的样式，我试图在我的导航组件中获取当前路径。
我已经尝试了一些常见的嫌疑人，但没有得到任何结果。特别是我认为会通过 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;