setting base href support for router

package.json

@@ -53,8 +53,8 @@
     "react-lazy-load": "^3.0.3",
     "react-pure-render": "^1.0.2",
     "react-redux": "^4.4.0",
-    "react-router": "^2.0.0",
-    "react-router-redux": "^3.0.0",
+    "react-router": "^2.5.1",
+    "react-router-redux": "^4.0.5",
     "redux": "^3.3.1",
     "redux-thunk": "^1.0.3",
     "style-loader": "^0.13.0",

src/actions/findbar.js

@@ -1,4 +1,4 @@
-import { browserHistory } from 'react-router';
+import history from '../routing/history';
 import { SEARCH } from '../containers/FindBar';
 
 export const RUN_COMMAND = 'RUN_COMMAND';
@@ -10,21 +10,20 @@ export function run(commandName, payload) {
   return { type: RUN_COMMAND, command: commandName, payload };
 }
 
-
 export function runCommand(commandName, payload) {
   return (dispatch, getState) => {
     switch (commandName) {
       case LIST_POSTS:
-        browserHistory.push('/collections/posts');
+        history.push('/collections/posts');
         break;
       case LIST_FAQ:
-        browserHistory.push('/collections/faq');
+        history.push('/collections/faq');
         break;
       case HELP:
         window.alert('Find Bar Help (PLACEHOLDER)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.');
         break;
       case SEARCH:
-        browserHistory.push('/search');
+        history.push('/search');
         break;
     }
     dispatch(run(commandName, payload));

src/components/EntryListing.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Bricks from 'bricks.js'
-import { browserHistory } from 'react-router';
+import Bricks from 'bricks.js';
+import history from '../routing/history';
 import Cards from './Cards';
 
 export default class EntryListing extends React.Component {
@@ -57,7 +57,7 @@ export default class EntryListing extends React.Component {
     return React.createElement(card, {
       key: entry.get('slug'),
       collection: collection,
-      onClick: browserHistory.push.bind(this, link),
+      onClick: history.push.bind(this, link),
       onImageLoaded: () => this.bricksInstance.pack(),
       text: entry.getIn(['data', collection.getIn(['card', 'text'])]),
       image: entry.getIn(['data', collection.getIn(['card', 'image'])]),

src/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
+import { Router } from 'react-router';
 import configureStore from './store/configureStore';
-import Routes from './routes/routes';
+import routes from './routing/routes';
+import history, { syncHistory } from './routing/history';
 import 'file?name=index.html!../example/index.html';
 import './index.css';
 
@@ -12,8 +14,13 @@ const el = document.createElement('div');
 el.id = 'root';
 document.body.appendChild(el);
 
+// Create an enhanced history that syncs navigation events with the store
+syncHistory(store);
+
 render((
   <Provider store={store}>
-    <Routes/>
+    <Router history={history}>
+      {routes}
+    </Router>
   </Provider>
 ), el);

src/routes/routes.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
-import App from '../containers/App';
-import CollectionPage from '../containers/CollectionPage';
-import EntryPage from '../containers/EntryPage';
-import SearchPage from '../containers/SearchPage';
-import NotFoundPage from '../containers/NotFoundPage';
-
-export default () => (
-  <Router history={browserHistory}>
-    <Route path="/" component={App}>
-      <IndexRoute component={CollectionPage}/>
-      <Route path="/collections/:name" component={CollectionPage}/>
-      <Route path="/collections/:name/entries/:slug" component={EntryPage}/>
-      <Route path="/search" component={SearchPage}/>
-      <Route path="*" component={NotFoundPage}/>
-    </Route>
-  </Router>
-);

src/routing/history.js

@@ -0,0 +1,15 @@
+import { createHistory } from 'history';
+import { useRouterHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+
+const base = document.querySelector('base');
+let history = useRouterHistory(createHistory)({
+  basename: base && base.href || ''
+});
+
+const syncHistory = (store) => {
+  history = syncHistoryWithStore(history, store);
+};
+
+export { syncHistory };
+export default history;

src/routing/routes.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, IndexRoute } from 'react-router';
+import App from '../containers/App';
+import CollectionPage from '../containers/CollectionPage';
+import EntryPage from '../containers/EntryPage';
+import SearchPage from '../containers/SearchPage';
+import NotFoundPage from '../containers/NotFoundPage';
+
+export default (
+  <Route path="/" component={App}>
+    <IndexRoute component={CollectionPage}/>
+    <Route path="/collections/:name" component={CollectionPage}/>
+    <Route path="/collections/:name/entries/:slug" component={EntryPage}/>
+    <Route path="/search" component={SearchPage}/>
+    <Route path="*" component={NotFoundPage}/>
+  </Route>
+);

src/store/configureStore.js

@@ -1,16 +1,15 @@
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import { browserHistory } from 'react-router';
-import { syncHistory, routeReducer } from 'react-router-redux';
+import { routerReducer } from 'react-router-redux';
 import reducers from '../reducers';
 
 const reducer = combineReducers({
   ...reducers,
-  router: routeReducer
+  routing: routerReducer
 });
 
 const createStoreWithMiddleware = compose(
-  applyMiddleware(thunkMiddleware, syncHistory(browserHistory)),
+  applyMiddleware(thunkMiddleware),
   window.devToolsExtension ? window.devToolsExtension() : (f) => f
 )(createStore);