Merge pull request #20 from YutHelloWorld/feature

feat: upgrade to react-router v4

Author: YutHelloWorld

package.json

@@ -30,7 +30,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
-    "react-router": "^3.0.0",
+    "react-router-dom": "^4.1.2",
     "react-spinkit": "^3.0.0",
     "react-transition-group": "^1.1.2",
     "reactstrap": "^4.8.0",

src/components/App.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import { browserHistory, Router } from 'react-router'
+import { Router, Route } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import PropTypes from 'prop-types'
+import CoreLayout from '../layouts/PageLayout/PageLayout'
+import { history } from '../store/location'
 
 class App extends React.Component {
   static propTypes = {
-    store  : PropTypes.object.isRequired,
-    routes : PropTypes.object.isRequired
+    store : PropTypes.object.isRequired
   }
 
   shouldComponentUpdate () {
@@ -15,12 +16,16 @@ class App extends React.Component {
 
   render () {
     /* ES6 解构赋值 */
-    const { store, routes } = this.props
+    const { store } = this.props
 
     return (
       <Provider store={store}>
         <div style={{ height : '100%' }}>
-          <Router history={browserHistory} children={routes} />
+          <Router history={history}>
+            <div>
+              <Route path='/' component={CoreLayout} />
+            </div>
+          </Router>
         </div>
       </Provider>
     )

src/components/AsyncComponent.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default function asyncComponent (importComponent) {
+  class AsyncComponent extends React.Component {
+    constructor (props) {
+      super(props)
+
+      this.state = {
+        component: null,
+      }
+    }
+
+    async componentDidMount () {
+      const { default : component } = await importComponent()
+
+      this.setState({
+        component: component
+      })
+    }
+
+    render () {
+      const C = this.state.component
+
+      return C
+        ? <C {...this.props} />
+        : null
+    }
+  }
+
+  return AsyncComponent
+}

src/layouts/PageLayout/PageLayout.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Link, IndexLink } from 'react-router'
+import { NavLink as Link } from 'react-router-dom'
 import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavLink, Container } from 'reactstrap'
 import PropTypes from 'prop-types'
 import './PageLayout.scss'
+import Routes from '../../routes'
 
 const location = {
   pathname : '/route/8080',
@@ -14,7 +15,7 @@ const location = {
 export default class PageLayout extends React.Component {
   /* 类的静态属性，不会被实例继承。ES试验特性写法:propTypes写入class */
   static propTypes = {
-    children : PropTypes.node
+    store    : PropTypes.object
   }
 
   constructor (props) {
@@ -36,20 +37,20 @@ export default class PageLayout extends React.Component {
       <div>
         <Navbar color='faded' light toggleable>
           <NavbarToggler right onClick={this.toggle} />
-          <NavbarBrand to='/' tag={IndexLink}>Vortex React</NavbarBrand>
+          <NavbarBrand to='/' tag={Link}>Vortex React</NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className='ml-auto' navbar>
               <NavLink to='/counter' activeClassName='active' tag={Link}>Counter</NavLink>
               <NavLink to='/zen' activeClassName='active' tag={Link}>Zen</NavLink>
               <NavLink to='/elapse' activeClassName='active' tag={Link}>Elapse</NavLink>
               <NavLink to={location} activeClassName='active' tag={Link}>Route</NavLink>
-              <NavLink to='/notFound' activeClassName='active' tag={Link}>404</NavLink>
+              <NavLink to='/pageNotFound' activeClassName='active' tag={Link}>404</NavLink>
               <NavLink href='https://github.com/YutHelloWorld/vortex-react'>Github</NavLink>
             </Nav>
           </Collapse>
         </Navbar>
         <Container className='text-center page-layout__viewport'>
-          {this.props.children}
+          <Routes />
         </Container>
       </div>
     )

src/main.js

@@ -5,18 +5,17 @@ import './styles/main.scss'
 
 // Store Initialization
 // ------------------------------------
-const store = createStore(window.__INITIAL_STATE__)
+export const store = createStore(window.__INITIAL_STATE__)
 
 // Render Setup
 // ------------------------------------
 const MOUNT_NODE = document.getElementById('root')
 
 let render = () => {
   const App = require('./components/App').default
-  const routes = require('./routes/index').default(store)
 
   ReactDOM.render(
-    <App store={store} routes={routes} />,
+    <App store={store} />,
     MOUNT_NODE
   )
 }

src/routes/Counter/index.js

@@ -1,18 +1,8 @@
 import { injectReducer } from '../../store/reducers'
+import { store } from '../../main'
+import Counter from './containers/CounterContainer'
+import reducer from './modules/counter'
 
-export default (store) => ({
-  path : 'counter',
-  /*  动态路由 */
-  getComponent (nextState, cb) {
-    /* 代码分割 */
-    require.ensure([], (require) => {
-      const Counter = require('./containers/CounterContainer').default
-      const reducer = require('./modules/counter').default
+injectReducer(store, { key : 'counter', reducer })
 
-      /*  将counterReducer注入rootReducer  */
-      injectReducer(store, { key : 'counter', reducer })
-
-      cb(null, Counter)
-    }, 'counter')
-  }
-})
+export default Counter

src/routes/Elapse/index.js

@@ -1,13 +1,8 @@
 import { injectReducer } from '../../store/reducers'
+import { store } from '../../main'
+import Elapse from './containers/ElapseContainer'
+import reducer from './modules/elapse'
 
-export default (store) => ({
-  path : 'elapse',
-  getComponent (nextState, cb) {
-    require.ensure([], (require) => {
-      const Elapse = require('./containers/ElapseContainer').default
-      const reducer = require('./modules/elapse').default
-      injectReducer(store, { key : 'elapse', reducer })
-      cb(null, Elapse)
-    }, 'elapse')
-  }
-})
+injectReducer(store, { key : 'elapse', reducer })
+
+export default Elapse

src/routes/Home/index.js

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

src/routes/PageNotFound/components/PageNotFound.js

@@ -5,7 +5,7 @@ import './PageNotFound.scss'
 import { withRouter } from 'react-router'
 import { Button } from 'reactstrap'
 
-const PageNotFound = ({ router : { goBack } }) => (
+const PageNotFound = ({ history : { goBack } }) => (
   <div className='not-found__container'>
     <p>Page not found!!!</p>
     <div>
@@ -16,7 +16,7 @@ const PageNotFound = ({ router : { goBack } }) => (
 )
 
 PageNotFound.propTypes = {
-  router : PropTypes.object.isRequired
+  history : PropTypes.object.isRequired
 }
 
 export default withRouter(PageNotFound)

src/routes/PageNotFound/index.js

@@ -1,9 +1,3 @@
-export default () => ({
-  path : '404',
-  getComponent (nextState, cb) {
-    require.ensure([], (require) => {
-      const PageNotFound = require('./components/PageNotFound').default
-      cb(null, PageNotFound)
-    }, 'pageNotFound')
-  }
-})
+import PageNotFound from './components/PageNotFound'
+
+export default PageNotFound