How to add an active class to my navigation links React router?
<p>I am very new to ReactJS and I am really stuck on this one so please be patient. I was wondering if there was a way to add an active class to my navigation links using react router. This is what my code looks like....</p>

<pre><code>  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) =&gt; {
    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 &lt;a href={history.createHref(to)} {...props} onClick={this.handleClick} /&gt;;
  }

}

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 (
    &lt;div className={cx(s.root, className)} role="navigation"&gt;
      &lt;Link className={s.link + ' fa fa-dribbble'} to="/dribbble"/&gt;
      &lt;Link className={s.link + ' fa fa-behance' } to="/behance"/&gt;
      &lt;Link className={s.link + ' fa fa-linkedin' } to="/linkedin"/&gt;
      &lt;Link className={s.link + ' fa fa-twitter' } to="/twitter"/&gt;
      &lt;Link className={s.link + ' fa fa-instagram' } to="/instagram"/&gt;
      &lt;Link className={s.link + ' fa fa-vimeo' } to="/vimeo"/&gt;
    &lt;/div&gt;
  );
}

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

export default withStyles(s)(Navigation);
</code></pre>

<p>What I want to do is add an active class like this for example:</p>

<pre><code>&lt;a class="link active"&gt;Home&lt;/a&gt;
&lt;a class="link"&gt;About&lt;/a&gt;
&lt;a class="link"&gt;Contact&lt;/a&gt;
&lt;a class="link"&gt;Work&lt;/a&gt;
&lt;a class="link"&gt;Support&lt;/a&gt;
</code></pre>

<p>Any ideas on how to do this? I have been messing around with react but I cant find an easy way to do it..</p>