ReactRouterReduxStaleLinkExample.jsx

import React, { PropTypes } from 'react'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import Router from 'react-router/BrowserRouter'
import Match from 'react-router/Match'
import Link from 'react-router/Link'
import { compose, getContext } from 'recompose';

const store = createStore((s = {}, a) => s)

const BasicExample = () => (
  <Router>
    <Provider store={store}>
      <div>
        <Nav />
        <hr/>

        <Match exactly pattern="/" component={Home} />
        <Match pattern="/about" component={About} />
        <Match pattern="/topics" component={Topics} />
      </div>
    </Provider>
  </Router>
)

const Nav = connect()(
  compose(
    getContext({ location: PropTypes.object, router: PropTypes.object }),
    connect()
  )(() => (
    <ul>
      <li><Link to="/" activeClassName="active">Home</Link></li>
      <li><Link to="/about" activeClassName="active">About</Link></li>
      <li><Link to="/topics" activeClassName="active">Topics</Link></li>
    </ul>
  ))
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ pathname }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li><Link to={`${pathname}/rendering`}>Rendering with React</Link></li>
      <li><Link to={`${pathname}/components`}>Components</Link></li>
      <li><Link to={`${pathname}/props-v-state`}>Props v. State</Link></li>
    </ul>

    <Match pattern={`${pathname}/:topicId`} component={Topic}/>
    <Match pattern={pathname} exactly render={() => (
      <h3>Please select a topic</h3>
    )}/>
  </div>
)

const Topic = ({ params }) => (
  <div>
    <h3>{params.topicId}</h3>
  </div>
)

export default BasicExample