如何将活动类添加到我的导航链接React路由器？

我对ReactJS非常陌生，而且我真的被这个问题困住了，所以请耐心等待。我想知道是否有方法使用反应路由器将活动类添加到我的导航链接。这是我的代码看起来像....如何将活动类添加到我的导航链接React路由器？

import React, { Component, PropTypes } from 'react'; 
    import history from '../../core/history'; 

    function isLeftClickEvent(event) { 
    return event.button === 0; 
    } 

    function isModifiedEvent(event) { 
    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); 
    } 

    class Link extends Component { // eslint-disable-line react/prefer-stateless- function 

    static propTypes = { 
    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, 
    onClick: PropTypes.func 
    }; 

    handleClick = (event) => { 
    let allowTransition = true; 

    if (this.props.onClick) { 
     this.props.onClick(event); 
    } 

    if (isModifiedEvent(event) || !isLeftClickEvent(event)) { 
     return; 
    } 

    if (event.defaultPrevented === true) { 
     allowTransition = false; 
    } 

    event.preventDefault(); 

    if (allowTransition) { 
     if (this.props.to) { 
     history.push(this.props.to); 
     } else { 
     history.push({ 
      pathname: event.currentTarget.pathname, 
      search: event.currentTarget.search 
     }); 
     } 
    } 
    }; 

    render() { 
    const { to, ...props } = this.props; // eslint-disable-line no-use-before-define 
    return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />; 
    } 

} 

export default Link; 


import React, { PropTypes } from 'react'; 
import cx from 'classnames'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Navigation.css'; 
import Link from '../Link'; 


function Navigation({ className }) { 
    return (
    <div className={cx(s.root, className)} role="navigation"> 
     <Link className={s.link + ' fa fa-dribbble'} to="/dribbble"/> 
     <Link className={s.link + ' fa fa-behance' } to="/behance"/> 
     <Link className={s.link + ' fa fa-linkedin' } to="/linkedin"/> 
     <Link className={s.link + ' fa fa-twitter' } to="/twitter"/> 
     <Link className={s.link + ' fa fa-instagram' } to="/instagram"/> 
     <Link className={s.link + ' fa fa-vimeo' } to="/vimeo"/> 
    </div> 
); 
} 

Navigation.propTypes = { 
    className: PropTypes.string 
}; 

export default withStyles(s)(Navigation);

我想要做的就是添加活动类像这样的例子：

<a class="link active">Home</a> 
<a class="link">About</a> 
<a class="link">Contact</a> 
<a class="link">Work</a> 
<a class="link">Support</a>

如何做到这一点任何想法？我一直在瞎搞与反应，但我不能找到一个简单的方法来做到这一点..

来源

2016-05-31 Francisco Pena

您可以更改活动链接的样式：

import React from 'react'; 
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'; 

const ACTIVE = { background: '#286090', color: '#fff'} 
// In your render 
<li><Link to="/case" activeStyle={ACTIVE}>case</Link></li> 
<li><Link to="/primarysource" activeStyle={ACTIVE}>primarysource</Link></li>     
<li><Link to="/literature" activeStyle={ACTIVE}>literature</Link></li>   
<li><Link to="/study" activeStyle={ACTIVE}>study</Link></li>

一个例子可以在反应路由器发现示例中找到https://github.com/reactjs/react-router/blob/master/examples/active-links/app.js

来源

2016-06-01 01:14:10 torresomar

是的，我认为多数民众赞成以正确的方式去了解它，但事实是我没有使用这个样板反应路由器...它带有一个自定义链接组件。这里是我使用https://github.com/kriasoft/react-starter-kit的Boilerplate –

其实我找到了答案，在这里它的

function Navigation({ className }) { 
    return (
    <div className={cx(s.root, className)} role="navigation"> 
     <Link className={cx(s.link, 'fa fa-dribbble', { 'active': location.pathname === '/dribbble' })} to="/dribbble" /> 
     <Link className={cx(s.link, 'fa fa-behance', { 'active': location.pathname === '/behance' })} to="/behance" /> 
     <Link className={cx(s.link, ' fa fa-linkedin', { 'active': location.pathname === '/linkedin' })} to="/linkedin" /> 
     <Link className={cx(s.link, ' fa fa-twitter', { 'active': location.pathname === '/twitter' })} to="/twitter" /> 
     <Link className={cx(s.link, ' fa fa-instagram', { 'active': location.pathname === '/instagram' })} to="/instagram" /> 
     <Link className={cx(s.link, ' fa fa-vimeo', { 'active': location.pathname === '/vimeo' })} to="/vimeo" /> 
    </div> 
); 
}

注：这是一个没有做出反应路由器

来源

2016-06-01 21:02:20

我只是用activeClassName =“活动”

<Link to="/" activeClassName="active"> 
          <i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link>

来源

2016-12-29 12:38:36

如何将活动类添加到我的导航链接React路由器？

回答

相关问题