tmp

Author: shendepu

bin/compile.js

@@ -16,6 +16,7 @@ const compile = () => {
       }
       debug('Copying static assets to dist folder.')
       fs.copySync(paths.client('static'), paths.dist())
+//       fs.writeFile(paths.dist('manifest.json'), JSON.stringify(stats))
     })
     .then(() => {
       debug('Compilation completed successfully.')

package.json

@@ -99,7 +99,7 @@
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-redux": "^4.4.5",
-    "react-router": "^2.8.0",
+    "react-router": "next",
     "redux": "^3.6.0",
     "redux-thunk": "^2.0.0",
     "rimraf": "^2.5.4",

src/containers/AppContainer.js

@@ -1,7 +1,14 @@
 import React, { Component, PropTypes } from 'react'
-import { Router, RouterContext } from 'react-router'
+import { Match, BrowserRouter, ServerRouter } from 'react-router'
 import { Provider } from 'react-redux'
 
+const MatchWithSubRoutes = (route) => (
+  <Match {...route} render={(props) => (
+    // pass the sub-routes down to keep nesting
+    <route.component {...props} routes={route.routes} />
+  )} />
+)
+
 class AppContainer extends Component {
   static propTypes = {
     routes : PropTypes.object.isRequired,
@@ -17,10 +24,17 @@ class AppContainer extends Component {
 
     let router
     if (!window.__IS_SSR) {
-      let browserHistory = require('react-router').browserHistory
-      router = <Router history={browserHistory} children={routes} />
+      router = <BrowserRouter>
+        {routes.map((route, i) => (
+          <MatchWithSubRoutes key={i} {...route} />
+        ))}
+      </BrowserRouter>
     } else {
-      router = <RouterContext children={routes} />
+      router = <ServerRouter>
+        {routes.map((route, i) => (
+          <MatchWithSubRoutes key={i} {...route} />
+        ))}
+      </ServerRouter>
     }
 
     return (

src/main.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import ReactDomServer from 'react-dom/server'
 import createStore from './store/createStore'
 // import AppContainer from './containers/AppContainer'
-import { match, Router, RouterContext } from 'react-router'
+import { Match, BrowserRouter, ServerRouter, createServerRenderContext } from 'react-router'
 import { Provider } from 'react-redux'
 
 // ========================================================
@@ -15,17 +15,25 @@ const store = createStore(initialState)
 // ========================================================
 // Render Setup
 // ========================================================
+const MatchWithSubRoutes = (route) => (
+  <Match {...route} render={(props) => (
+    // pass the sub-routes down to keep nesting
+    <route.component {...props} routes={route.routes} />
+  )} />
+)
+
 let render
 
 if (!window.__IS_SSR) {
   const MOUNT_NODE = document.getElementById('root')
   render = () => {
     const routes = require('./routes/index').default(store)
-    const browserHistory = require('react-router').browserHistory
     ReactDOM.render(
       <Provider store={store}>
         <div style={{ height: '100%' }}>
-          <Router history={browserHistory} children={routes} />
+          <BrowserRouter>
+            <MatchWithSubRoutes key={0} {...routes[0]} />
+          </BrowserRouter>
         </div>
       </Provider>,
       MOUNT_NODE
@@ -73,25 +81,33 @@ if (!window.__IS_SSR) {
 } else {
   render = () => {
     const routes = require('./routes/index').default(store)
-    let html = ''
-    match({ routes, location: '/' }, (error, redirectionLocation, renderProps) => {
-      if (error) {
+    let requestUrl = window['requestUrl'] || '/'
 
-      } else if (redirectionLocation) {
+    const context = createServerRenderContext()
+    let html = ReactDomServer.renderToString(
+      <ServerRouter context={context} location={requestUrl}>
+        <MatchWithSubRoutes key={0} {...routes[0]} />
+      </ServerRouter>
+    )
 
-      } else if (renderProps) {
-        html = ReactDomServer.renderToString(
-          <Provider store={store}>
-            <div style={{ height: '100%' }}>
-              <RouterContext {...renderProps} />
-            </div>
-          </Provider>
-        )
-        console.log()
-      } else {
-        // 404
-      }
-    })
+//     match({ routes, location: '/' }, (error, redirectionLocation, renderProps) => {
+//       if (error) {
+//
+//       } else if (redirectionLocation) {
+//
+//       } else if (renderProps) {
+//         html = ReactDomServer.renderToString(
+//           <Provider store={store}>
+//             <div style={{ height: '100%' }}>
+//               <RouterContext {...renderProps} />
+//             </div>
+//           </Provider>
+//         )
+//         console.log()
+//       } else {
+//         // 404
+//       }
+//     })
 
     return html
   }

src/routes/Counter/index.js

@@ -1,7 +1,7 @@
 import { injectReducer } from '../../store/reducers'
 
 export default (store) => ({
-  path : 'counter',
+  pattern : 'counter',
   /*  Async getComponent is only invoked when route matches   */
   getComponent (nextState, cb) {
     /*  Webpack - use 'require.ensure' to create a split point

src/routes/Home/index.js

@@ -2,5 +2,6 @@ import HomeView from './components/HomeView'
 
 // Sync route definition
 export default {
+  pattern: '/',
   component : HomeView
 }

src/routes/index.js

@@ -1,19 +1,15 @@
 // We only need to import the modules necessary for initial render
-import CoreLayout from '../layouts/CoreLayout/CoreLayout'
-import Home from './Home'
-import CounterRoute from './Counter'
+// import CoreLayout from '../layouts/CoreLayout/CoreLayout'
+import HomeRoute from './Home'
+// import CounterRoute from './Counter'
 
 /*  Note: Instead of using JSX, we recommend using react-router
     PlainRoute objects to build route definitions.   */
 
-export const createRoutes = (store) => ({
-  path        : '/',
-  component   : CoreLayout,
-  indexRoute  : Home,
-  childRoutes : [
-    CounterRoute(store)
-  ]
-})
+export const createRoutes = (store) => ([
+  HomeRoute
+//     CounterRoute(store)
+])
 
 /*  Note: childRoutes can be chunked or otherwise loaded programmatically
     using getChildRoutes with the following signature:

src/store/createStore.js

@@ -1,7 +1,7 @@
 import { applyMiddleware, compose, createStore } from 'redux'
 import thunk from 'redux-thunk'
 import makeRootReducer from './reducers'
-import { updateLocation } from './location'
+// import { updateLocation } from './location'
 
 export default (initialState = {}) => {
   // ======================================================
@@ -35,8 +35,8 @@ export default (initialState = {}) => {
 
   // To unsubscribe, invoke `store.unsubscribeHistory()` anytime
   if (!window.__IS_SSR) {
-    const browserHistory = require('react-router').browserHistory
-    store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
+//     const browserHistory = require('react-router').browserHistory
+//     store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
   }
 
   if (module.hot) {

tests/routes/Counter/index.spec.js

@@ -11,7 +11,7 @@ describe('(Route) Counter', () => {
     expect(typeof _route).to.equal('object')
   })
 
-  it('Configuration should contain path `counter`', () => {
-    expect(_route.path).to.equal('counter')
-  })
+//   it('Configuration should contain path `counter`', () => {
+//     expect(_route.path).to.equal('counter')
+//   })
 })