Skip to content

Instantly share code, notes, and snippets.

@dawehner
Created March 26, 2018 21:49
Show Gist options
  • Save dawehner/c59a19c81a442a2c1fddfeb5064e5732 to your computer and use it in GitHub Desktop.
Save dawehner/c59a19c81a442a2c1fddfeb5064e5732 to your computer and use it in GitHub Desktop.
diff --git a/package.json b/package.json
index 1ae5f33..2c75355 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"react-redux": "^5.0.7",
"react-redux-loading-bar": "^3.1.2",
"react-router-dom": "^4.2.2",
+ "react-router-redux": "^5.0.0-alpha.9",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-saga": "^0.16.0"
diff --git a/src/App.js b/src/App.js
index 69b31f4..eca28c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
-import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { createStore, applyMiddleware } from 'redux';
+import React, { Component, Fragment } from 'react';
+import { Router, Route, Switch } from 'react-router';
+import createBrowserHistory from 'history/createBrowserHistory';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
@@ -16,32 +18,39 @@ import base from './styles/base'; // eslint-disable-line no-unused-vars
import actions from './actions/index';
import reducers from './reducers/index';
+const history = createBrowserHistory();
+const middleware = routerMiddleware(history);
+
const sagaMiddleware = createSagaMiddleware();
+
const store = createStore(
reducers,
- {},
- composeWithDevTools(applyMiddleware(sagaMiddleware)),
+ composeWithDevTools(
+ applyMiddleware(sagaMiddleware, middleware),
+ ),
);
sagaMiddleware.run(actions);
+const withDefault = component => () => {
+ return <Default>{React.createElement(component)}</Default>;
+};
+
class App extends Component {
componentDidMount() {
- window.history.replaceState(null, null, '/');
+ history.replace('/');
}
render() {
return (
<Provider store={store}>
- <Router>
- <Default>
- <Switch>
- <Route exact path="/" component={Home} />
- {Object.keys(routes).map(route => (
- <Route path={route} component={routes[route]} key={route} />
- ))}
- <Route component={NoMatch} />
- </Switch>
- </Default>
- </Router>
+ <ConnectedRouter history={history}>
+ <Switch>
+ <Route exact path="/" component={withDefault(Home)} />
+ {Object.keys(routes).map(route => (
+ <Route path={route} component={withDefault(routes[route])} key={route} />
+ ))}
+ <Route component={NoMatch} />
+ </Switch>
+ </ConnectedRouter>
</Provider>
);
}
diff --git a/src/components/06_wrappers/Default/Default.js b/src/components/06_wrappers/Default/Default.js
index 044cda0..3ee3db3 100644
--- a/src/components/06_wrappers/Default/Default.js
+++ b/src/components/06_wrappers/Default/Default.js
@@ -113,23 +113,23 @@ styles = {
};
Default.propTypes = {
- children: node.isRequired,
- error: string,
- menuLinks: objectOf(
- shape({
- subtree: objectOf({
- link: shape({
- url: string,
- title: string,
- }),
- }),
- link: shape({
- url: string,
- title: string,
- }),
- }),
- ).isRequired,
- requestMenu: func.isRequired,
+ // children: node.isRequired,
+ // error: string,
+ // menuLinks: objectOf(
+ // shape({
+ // subtree: objectOf({
+ // link: shape({
+ // url: string,
+ // title: string,
+ // }),
+ // }),
+ // link: shape({
+ // url: string,
+ // title: string,
+ // }),
+ // }),
+ // ).isRequired,
+ // requestMenu: func.isRequired,
};
Default.defaultProps = {
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 5d7269b..17b5f31 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -2,5 +2,7 @@ import { combineReducers } from 'redux';
import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';
import application from './application';
-const reducers = { application };
+import { routerReducer } from 'react-router-redux';
+
+const reducers = { application, routerReducer };
export default combineReducers({ ...reducers, loadingBar });
diff --git a/yarn.lock b/yarn.lock
index 374a375..0d3958b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5998,6 +5998,14 @@ react-router-dom@^4.2.2:
react-router "^4.2.0"
warning "^3.0.0"
+react-router-redux@^5.0.0-alpha.9:
+ version "5.0.0-alpha.9"
+ resolved "https://registry.npmjs.org/react-router-redux/-/react-router-redux-5.0.0-alpha.9.tgz#825431516e0e6f1fd93b8807f6bd595e23ec3d10"
+ dependencies:
+ history "^4.7.2"
+ prop-types "^15.6.0"
+ react-router "^4.2.0"
+
react-router@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment