加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:43:23 所属栏目:百科 来源:网络整理
导读:参见英文答案 react-router getting this.props.location in child components1个 要确定特定菜单项的样式,我试图获取导航组件中的当前路径. 我已经尝试了一些常见的嫌疑人,但无法得到任何结果.特别是我认为通过React注入的属性不存在. this.props.location
参见英文答案 > 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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读