Using React Router v4 Link Component With Any Framework, using Function as Child Components.

index.jsx

import {render} from 'react-dom'
import React from 'react'
import App from './Usage.jsx'

render(<App/>,document.getElementById('container'))

ReactRouterLink.js

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

class Decorated extends React.Component {
  constructor(props,context) {
    super(props,context)
    this.state = {active: false}
  }
  static propTypes = {
    to: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
    ]).isRequired,
    children: React.PropTypes.func.isRequired,
  };

  resolveToLocation = to => {
    return typeof to === 'object' ? to['pathname'] : to
  }

  isActive = (toLocation, nextProps) => {
    const currProps = nextProps || this.props
    const { location, to } = currProps
    return toLocation == location.pathname
  }
  handleClick = event => {
    event.preventDefault();
    const { to } = this.props;
    this.props.push(to)
    this.setState({active: this.isActive(to)})
  }

  componentWillMount() {
    const { to } = this.props;
    this.setState({active: this.isActive(to)})
  }
  componentWillReceiveProps(nextProps) {
    const { to } = this.props;
    if (this.state.active != this.isActive(to,nextProps)) {
      this.setState({active: this.isActive(to,nextProps)})
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    return this.state.active != nextState.active
  }
  render () {
    const { to } = this.props;
    const toLocation = this.resolveToLocation(to);
    return this.props.children(toLocation,this.handleClick,this.state.active)
  }
}

export default withRouter(Decorated)

Usage.jsx

import { Route, BrowserRouter as Router } from 'react-router-dom'
import { List, ListItem } from 'react-toolbox'
import {Button} from 'react-toolbox/lib/button';

import React, { Component, PropTypes } from 'react';

import RRLink from '../components/RRLinkFunc.js'

const RrRt = () => (
  <div>
  <List>
    <RRLink key={1} to="/home">
       {
        (location,handler,isActive) => {
          const className = 'customRouterList'
          const activeClassName = 'customRouterListActive'
          const _className = isActive ? `${className} ${activeClassName}` : className;
          return <ListItem caption="Home" onClick={handler} className={_className} />
        }
      }
    </RRLink>
    <RRLink key={2} to="/school">
      {
        (location,handler,isActive) => {
          const className = 'customRouterList'
          const activeClassName = 'customRouterListActive'
          const _className = isActive ? `${className} ${activeClassName}` : className;
          return <ListItem to={location} caption="School" onClick={handler} className={_className} />
        }
      }
    </RRLink>
    <RRLink key={3} to="/work">
      {
        (location,handler,isActive) => {
          const className = 'customRouterList'
          const activeClassName = 'customRouterListActive'
          const _className = isActive ? `${className} ${activeClassName}` : className;
          return <ListItem to={location} caption="Work" onClick={handler} className={_className} />
        }
      }
    </RRLink>
  </List>
  <RRLink key={3} to="/work">
    {
      (location,handler,isActive) => {
        const className = 'customRouterList'
        const activeClassName = 'customRouterListActive'
        const _className = isActive ? `${className} ${activeClassName}` : className;
        return <Button href={location} label="Work" onClick={handler} />
      }
    }
  </RRLink>
  </div>
)


const Expose = () => (
  <Router>
  <div>
    <RrRt/>
    <Route path="/home" component={()=> <h1> Home </h1>} />
    <Route path="/school" component={()=> <h1> School </h1> } />
     <Route path="/Work" component={()=> <h1> Work </h1> } />
  </div>
  </Router>
)

export default Expose