diff --git a/package.json b/package.json
index fae8a986..defae628 100644
--- a/package.json
+++ b/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",
diff --git a/src/actions/findbar.js b/src/actions/findbar.js
index b231b46f..77053ada 100644
--- a/src/actions/findbar.js
+++ b/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));
diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js
index 130f1cd2..712c0c08 100644
--- a/src/components/EntryListing.js
+++ b/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'])]),
diff --git a/src/index.js b/src/index.js
index 40da4d74..79fea2e0 100644
--- a/src/index.js
+++ b/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((
-
+
+ {routes}
+
), el);
diff --git a/src/routes/routes.js b/src/routes/routes.js
deleted file mode 100644
index 50a798d6..00000000
--- a/src/routes/routes.js
+++ /dev/null
@@ -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 () => (
-
-
-
-
-
-
-
-
-
-);
diff --git a/src/routing/history.js b/src/routing/history.js
new file mode 100644
index 00000000..12a7b087
--- /dev/null
+++ b/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;
diff --git a/src/routing/routes.js b/src/routing/routes.js
new file mode 100644
index 00000000..39f1bf81
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+);
diff --git a/src/store/configureStore.js b/src/store/configureStore.js
index 3107dba0..d7552c00 100644
--- a/src/store/configureStore.js
+++ b/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);