index.js

import React from 'react';
import { render } from 'react-dom';
import { connect, Provider as ReduxProvider } from "react-redux";
import { BaseLink, RouterProvider } from 'react-router5';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { routeNodeSelector, router5Middleware, router5Reducer } from 'redux-router5';
import createRouter from 'router5';
import browserPlugin from 'router5/plugins/browser';

const App = ({ route }) => {
  let content;

  switch (route.name) {
    case 'a':
      content = <h1>A</h1>;
      break;
    case 'b':
      content = <h1>B ({route.params.id})</h1>;
      break;
    default:
      content = <h1>home</h1>;
      break;
  }

  return (
    <div>
      <ul>
        <li><BaseLink routeName="home">home</BaseLink></li>
        <li><BaseLink routeName="a">A</BaseLink></li>
        <li>
          <BaseLink routeName="b" routeParams={{ id: 'foo' }}>
            B (id = foo)
          </BaseLink>
        </li>
      </ul>

      {content}
    </div>
  );
};

const WrappedApp = connect(routeNodeSelector(''))(App);;

const routes = [
  { name: 'home', path: '/' },
  { name: 'a', path: '/a' },
  { name: 'b', path: '/b/:id' },
];

const router = createRouter(routes).usePlugin(browserPlugin());

const reducers = combineReducers({ router: router5Reducer });
const enhancers = applyMiddleware(router5Middleware(router));
const store = createStore(reducers, {}, enhancers);

const AppWithProviders = (
  <ReduxProvider store={store}>
    <RouterProvider router={router}>
      <WrappedApp />
    </RouterProvider>
  </ReduxProvider>
);

router.start(() => render(AppWithProviders, document.getElementById('root')));