ListItemLink.js

const React = require('react');
const { Link } = require('react-router');

/**
 * class ListItemLink < Router.Link
 *
 * Extends <Link /> to move the active class name to a wrapping <li>
 */
export default class ListItemLink extends Link {
  /**
   * Moves the `style` and `className` props to a wrapping <li> element.
   * Everything else is dropped down into a child <a> element.
   */
  render() {
    let props = Object.assign({}, this.props, {
      href: this.getHref(),
      onClick: this.handleClick.bind(this)
    });

    let style = {};

    if (props.activeStyle && this.getActiveState()) {
      style = props.activeStyle;
    }

    return (
      <li className={this.getClassName()} style={style}>
        <a {...props}>{this.props.children}</a>
      </li>
    );
  }
}