Merge pull request #73 from kiki-le-singe/implement_react_router_4

Implement react router 4

Author: kiki-le-singe

README.md

@@ -137,14 +137,14 @@ You should just install an extension [Redux DevTools Extension](https://github.c
 Personally I use [Redux DevTools for Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
 
 > Are there any other alternatives? Sure!
-> You can also use [Redux DevTools](https://github.com/gaearon/redux-devtools). And there is also a small logger middleware `(~/src/common/redux/middleware/logger)` to log all actions and states after they are dispatched.
+> You can also use [Redux DevTools](https://github.com/gaearon/redux-devtools). And there is also a small logger middleware [`redux-logger`](https://github.com/evgenyrodionov/redux-logger) to log all actions and states after they are dispatched.
 
 
 ## Features
 * [react](https://github.com/facebook/react)
 * [redux](https://github.com/reactjs/redux)
 * [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)
-* [react-router](https://github.com/reactjs/react-router)
+* [react-router 4](https://github.com/reactjs/react-router)
 * [react-router-redux](https://github.com/reactjs/react-router-redux)
 * [react-helmet](https://github.com/nfl/react-helmet)
 * [React Hot Loader 3](https://github.com/gaearon/react-hot-loader)
@@ -176,7 +176,7 @@ Personally I use [Redux DevTools for Chrome](https://chrome.google.com/webstore/
 * [why-did-you-update](https://github.com/garbles/why-did-you-update)
 * [babel-preset-latest](https://babeljs.io/docs/plugins/preset-latest/)
 * Backend bundle with webpack
-* Code Splitting
+* Code Splitting ( ** for now doesn't work with React Router 4. You can use an old version of this starter [`2.0.5`](https://github.com/kiki-le-singe/react-redux-universal-boilerplate/releases/tag/2.0.5) **)
 
 
 ## Styles

package.json

@@ -56,6 +56,7 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "fs-extra": "^3.0.0",
     "globby": "^6.1.0",
+    "history": "^4.6.1",
     "inquirer": "^3.0.6",
     "ip": "^1.1.5",
     "koa": "^2.2.0",
@@ -76,9 +77,10 @@
     "react-helmet": "^5.0.3",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-redux": "^5.0.4",
-    "react-router": "^3.0.2",
-    "react-router-redux": "^4.0.8",
+    "react-router-dom": "^4.1.1",
+    "react-router-redux": "next",
     "redux": "^3.6.0",
+    "redux-logger": "^3.0.1",
     "serialize-javascript": "^1.3.0",
     "source-map-support": "^0.4.15",
     "webpack": "^2.4.1",

readyToDeploy/package.json

@@ -22,8 +22,8 @@
     "react-dom": "^15.5.4",
     "react-helmet": "^5.0.3",
     "react-redux": "^5.0.4",
-    "react-router": "^3.0.2",
-    "react-router-redux": "^4.0.8",
+    "react-router-dom": "^4.1.1",
+    "react-router-redux": "next",
     "redux": "^3.6.0",
     "serialize-javascript": "^1.3.0",
     "source-map-support": "^0.4.15"

readyToDeploy/yarn.lock

@@ -145,24 +145,18 @@ dashify@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dashify/-/dashify-0.2.2.tgz#6a07415a01c91faf4a32e38d9dfba71f61cb20fe"
 
-debug@*, debug@^2.6.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
+debug@*, debug@^2.6.0, debug@^2.6.6:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.6.tgz#a9fa6fbe9ca43cf1e79f73b75c0189cbb7d6db5a"
   dependencies:
-    ms "0.7.2"
+    ms "0.7.3"
 
 debug@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
   dependencies:
     ms "0.7.2"
 
-debug@^2.6.6:
-  version "2.6.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.6.tgz#a9fa6fbe9ca43cf1e79f73b75c0189cbb7d6db5a"
-  dependencies:
-    ms "0.7.3"
-
 decamelize@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -292,13 +286,14 @@ hide-powered-by@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hide-powered-by/-/hide-powered-by-1.0.0.tgz#4a85ad65881f62857fc70af7174a1184dccce32b"
 
-history@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
+history@^4.5.1, history@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd"
   dependencies:
     invariant "^2.2.1"
     loose-envify "^1.2.0"
-    query-string "^4.2.2"
+    resolve-pathname "^2.0.0"
+    value-equal "^0.2.0"
     warning "^3.0.0"
 
 hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
@@ -375,7 +370,7 @@ inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
-invariant@^2.0.0, invariant@^2.2.1:
+invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -397,6 +392,10 @@ is-stream@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -551,7 +550,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -646,6 +645,12 @@ path-is-absolute@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
+path-to-regexp@^1.5.3:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 platform@1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.3.tgz#646c77011899870b6a0903e75e997e8e51da7461"
@@ -662,13 +667,6 @@ prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7:
   dependencies:
     fbjs "^0.8.9"
 
-query-string@^4.2.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 react-dom@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
@@ -699,18 +697,33 @@ react-redux@^5.0.4:
     loose-envify "^1.1.0"
     prop-types "^15.0.0"
 
-react-router-redux@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
+react-router-dom@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
+  dependencies:
+    history "^4.5.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.4"
+    react-router "^4.1.1"
 
-react-router@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.2.tgz#5a19156678810e01d81901f9c0fef63284b8a514"
+react-router-redux@next:
+  version "5.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.6.tgz#7418663c2ecd3c51be856fcf28f3d1deecc1a576"
+  dependencies:
+    history "^4.5.1"
+    prop-types "^15.5.4"
+    react-router "^4.1.1"
+
+react-router@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
   dependencies:
-    history "^3.0.0"
+    history "^4.6.0"
     hoist-non-react-statics "^1.2.0"
-    invariant "^2.2.1"
-    loose-envify "^1.2.0"
+    invariant "^2.2.2"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.5.3"
+    prop-types "^15.5.4"
     warning "^3.0.0"
 
 react-side-effect@^1.1.0:
@@ -761,6 +774,10 @@ resolve-path@^1.3.1:
     http-errors "~1.5.0"
     path-is-absolute "1.0.1"
 
+resolve-pathname@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
+
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -803,10 +820,6 @@ source-map@0.5.x, source-map@^0.5.6, source-map@~0.5.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-
 symbol-observable@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
@@ -858,6 +871,10 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
+value-equal@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"
+
 vary@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"

src/client/index.js

@@ -1,34 +1,35 @@
 import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
+import createHistory from 'history/createBrowserHistory'
 import { Provider } from 'react-redux'
-import { match, Router, browserHistory } from 'react-router'
-import { syncHistoryWithStore } from 'react-router-redux'
 import { AppContainer } from 'react-hot-loader'
+import { ConnectedRouter } from 'react-router-redux'
+import AppLayout from 'common/layouts/AppLayout'
 import configureStore from '../common/redux/store'
-import routes from '../common/routes'
 
 const preloadedState = window.__PRELOADED_STATE__
-const store = configureStore(preloadedState)
-const history = syncHistoryWithStore(browserHistory, store)
+// Create a history of your choosing (we're using a browser history in this case)
+const history = createHistory()
+const store = configureStore(history, preloadedState)
 const rootEl = document.getElementById('root')
 
 const renderApp = () => {
-  // Sync routes both on client and server
-  match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
-    render(
-      <AppContainer>
-        <Provider store={store}>
-          <Router {...renderProps} />
-        </Provider>
-      </AppContainer>,
-      rootEl,
-    )
-  })
+  render(
+    <AppContainer>
+      <Provider store={store}>
+        { /* ConnectedRouter will use the store from Provider automatically */ }
+        <ConnectedRouter history={history}>
+          <AppLayout />
+        </ConnectedRouter>
+      </Provider>
+    </AppContainer>,
+    rootEl,
+  )
 }
 
 // Enable hot reload by react-hot-loader
 if (module.hot) {
-  module.hot.accept('../common/routes', () => {
+  module.hot.accept('common/layouts/AppLayout', () => {
     setImmediate(() => {
       // Preventing the hot reloading error from react-router
       unmountComponentAtNode(rootEl)

src/common/layouts/AppLayout/AppLayout.jsx

@@ -1,8 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router'
+import { Link, Route, Switch } from 'react-router-dom'
 import Helmet from 'react-helmet'
 
+import Home from 'common/views/HomeView'
+import HelloView from 'common/views/HelloView'
+import AboutView from 'common/views/AboutView'
+import CounterView from 'common/views/CounterView' // eslint-disable-line
+import NotFoundRouteView from 'common/views/NotFoundRouteView'
+
 import config from '../../config'
 
 const propTypes = {
@@ -12,7 +18,7 @@ const defaultProps = {
   children: {}
 }
 
-function AppLayout(props) {
+function AppLayout() {
   return (
     <div className="views">
       <Helmet {...config.app} />
@@ -26,7 +32,13 @@ function AppLayout(props) {
         <li><Link to="/counter">Counter</Link></li>
       </ul>
 
-      {props.children}
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/hello" component={HelloView} />
+        <Route path="/about" component={AboutView} />
+        <Route path="/counter" component={CounterView} />
+        <Route component={NotFoundRouteView} />
+      </Switch>
     </div>
   )
 }

src/common/redux/middleware/logger.js

@@ -1,14 +1,15 @@
 import { createStore, applyMiddleware, compose } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
 
-import logger from '../middleware/logger'
+import logger from 'redux-logger'
 import rootReducer from '../reducers'
 
-const configureStoreDev = (preloadedState = {}) => {
+const configureStoreDev = (history = {}, preloadedState = {}) => {
   const store = createStore(
     rootReducer,
     preloadedState,
     compose(
-      applyMiddleware(logger),
+      applyMiddleware(logger, routerMiddleware(history)),
       (__CLIENT__ && window.devToolsExtension) ? window.devToolsExtension() : f => f
     ))
 

src/common/redux/store/configureStoreDev.js

@@ -1,7 +1,14 @@
-import { createStore } from 'redux'
+import { createStore, applyMiddleware, compose } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
 
 import rootReducer from '../reducers'
 
-const configureStoreProd = (preloadedState = {}) => createStore(rootReducer, preloadedState)
+const configureStoreProd = (history = {}, preloadedState = {}) => createStore(
+  rootReducer,
+  preloadedState,
+  compose(
+    applyMiddleware(routerMiddleware(history)),
+  )
+)
 
 export default configureStoreProd