参见英文答案 >
react-router getting this.props.location in child components1个
要确定特定菜单项的样式,我试图获取导航组件中的当前路径.
要确定特定菜单项的样式,我试图获取导航组件中的当前路径.
我已经尝试了一些常见的嫌疑人,但无法得到任何结果.特别是我认为通过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;
首先将组件添加到路由器
- <Router path="/" component={Navigation} />
你可以进入你的道路
- this.props.location.pathname
这是位置的自述文件
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md