Created
March 26, 2018 21:49
-
-
Save dawehner/c59a19c81a442a2c1fddfeb5064e5732 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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