reactjs – 获取反应组件中的当前路径

前端之家收集整理的这篇文章主要介绍了reactjs – 获取反应组件中的当前路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > 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

  1. import React,{Component,PropTypes} from 'react';
  2. import styles from './Navigation.css';
  3. import NavigationItem from './NavigationItem';
  4.  
  5. class Navigation extends Component {
  6.  
  7. constructor(props) {
  8. super(props);
  9. }
  10.  
  11. getNavigationClasses() {
  12. let {navigationOpen,showNavigation} = this.props.layout;
  13. let navigationClasses = navigationOpen ? styles.navigation + ' ' + styles.open : styles.navigation;
  14. if (showNavigation) {
  15. navigationClasses = navigationClasses + ' ' + styles.collapsed;
  16. }
  17. return navigationClasses;
  18. }
  19.  
  20. render() {
  21. /*
  22. TODO: get pathname for active marker
  23. */
  24.  
  25. let navigationClasses = this.getNavigationClasses();
  26. return (
  27. <div
  28. className={navigationClasses}
  29. onClick={this.props.onToggleNavigation}
  30. >
  31.  
  32. {/* Timeline */}
  33. <NavigationItem
  34. linkTo='/timeline'
  35. className={styles.navigationItem + ' ' + styles.timeline}
  36. displayText='Timeline'
  37. iconType='timeline'
  38. />
  39.  
  40. {/* Contacts */}
  41. <NavigationItem
  42. linkTo='/contacts'
  43. className={styles.navigationItem + ' ' + styles.contact + ' ' + styles.active}
  44. displayText='Contacts'
  45. iconType='contacts'
  46. />
  47.  
  48. </div>
  49. );
  50. }
  51. }
  52.  
  53. Navigation.propTypes = {
  54. layout: PropTypes.object,className: PropTypes.string,onToggleNavigation: PropTypes.func
  55. };
  56.  
  57. export default Navigation;
首先将组件添加到路由器
  1. <Router path="/" component={Navigation} />

你可以进入你的道路

  1. this.props.location.pathname

这是位置的自述文件

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

猜你在找的React相关文章