React Router 4.0 LinkContainer

LinkContainer.js

'use strict'

import React, { Component, PropTypes, cloneElement } from 'react'
import { Route } from 'react-router-dom'

const isModifiedEvent = (event) => (
  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
)

export default class LinkContainer extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    target: PropTypes.string,
    replace: PropTypes.bool,
    to: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]).isRequired
  }

  static defaultProps = {
    replace: false
  }

  static contextTypes = {
    router: PropTypes.shape({
      history: PropTypes.shape({
        push: PropTypes.func.isRequired,
        replace: PropTypes.func.isRequired,
        createHref: PropTypes.func.isRequired
      }).isRequired
    }).isRequired
  }

  handleClick = (event) => {
    if (this.props.onClick) {
      this.props.onClick(event)
    }

    if (
      !event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore right clicks
      !this.props.target && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
    ) {
      event.preventDefault()

      const { history } = this.context.router
      const { replace, to } = this.props

      if (replace) {
        history.replace(to)
      } else {
        history.push(to)
      }
    }
  }

  render () {
    const { to, children, ...props } = this.props
    const href = this.context.router.history.createHref(
      typeof to === 'string' ? { pathname: to } : to
    )
    return (
      <Route
        path={to}
        {...props}
        children={({match}) => {
          const active = !!match
          return cloneElement(children, {
            href,
            active,
            onClick: this.handleClick
          })
        }} />
    )
  }
}