ナビゲーションリンクにアクティブなクラスを追加するにはどうすればいいですか？

Question

私はReactJSには非常に新しく、私は本当にこの1つに固執しています。私は反応ルータを使用してナビゲーションリンクにアクティブなクラスを追加する方法があるのだろうかと思っていました。これは私が何をしたいのか....私のコードがどのように見えるか

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> 

任意のアイデア？あなたがアクティブリンクのスタイルを変更することができます。..

Answer 1

を私は反応をいじりされていますが、私はそれを行うための簡単な方法を見つけるカント：

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

Answer 2

githubの例は実際に私はそれが

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> 
); 
} 

NOTEだここに答えが見つかりました：ルーターに

に反応することなく、これは

Answer 3

私はちょうどactiveClassName

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