import React, { Component } from 'react';
import { Link, IndexLink } from 'react-router';

export default class NavLink extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const { router } = this.context;
    const { index, to, children, ...props } = this.props;

    const isActive = router.isActive(to);

    return (
      <li className={isActive ? 'active' : ''}>
        <Link to={to} {...props}>{children}</Link>
      </li>
    );
  }
}

NavLink.contextTypes = {
  router: React.PropTypes.object
};

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router';

const NavLink = class NavLink extends Component {
  render() {
    const { to, children, ...props } = this.props;

    const isActive = this.props.router.isActive(to);

    return (
      <li className={isActive ? 'active' : ''}>
        <Link to={to} {...props}>{children}</Link>
      </li>
    );
  }
};

export default withRouter(NavLink);

Use .withRouter() instead of context to get active link, since context API apparently isn't quite stable
Use .withRouter() instead of context to get active link, since context API apparently isn't quite stable

