feat: complete upgrade react-router v4

Sven · Sven · commit 7e2fcdaa6437 · 2017-08-06T20:01:12.000+08:00
diff --git a/src/components/AsyncComponent.js b/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
+}
diff --git a/src/layouts/PageLayout/PageLayout.js b/src/layouts/PageLayout/PageLayout.js
@@ -1,10 +1,9 @@
 import React from 'react'
-import { NavLink as Link, Switch, Route } from 'react-router-dom'
+import { NavLink as Link, Switch, Route, Redirect } from 'react-router-dom'
 import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavLink, Container } from 'reactstrap'
 import PropTypes from 'prop-types'
 import './PageLayout.scss'
-import Home from '../../routes/Home'
-import Counter from '../../routes/Counter'
+import Home, { AsyncCounter, AsyncZen, AsyncElapse, AsyncRoute, AsyncPageNotFound } from '../../routes'
 
 const location = {
   pathname : '/route/8080',
@@ -45,15 +44,20 @@ export default class PageLayout extends React.Component {
               <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'>
           <Switch>
             <Route exact path='/' component={Home} />
-            <Route path='/counter' component={Counter} />
+            <Route path='/counter' component={AsyncCounter} />
+            <Route path='/zen' component={AsyncZen} />
+            <Route path='/elapse' component={AsyncElapse} />
+            <Route path='/route/:id' component={AsyncRoute} />
+            <Route path='/404' component={AsyncPageNotFound} />
+            <Redirect from='*' to='/404' />
           </Switch>
         </Container>
       </div>
diff --git a/src/routes/Counter/index.js b/src/routes/Counter/index.js
@@ -1,7 +1,8 @@
 import { injectReducer } from '../../store/reducers'
+import { store } from '../../main'
 import Counter from './containers/CounterContainer'
 import reducer from './modules/counter'
-import { store } from '../../main'
 
 injectReducer(store, { key : 'counter', reducer })
+
 export default Counter
diff --git a/src/routes/Elapse/index.js b/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
diff --git a/src/routes/PageNotFound/components/PageNotFound.js b/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)
diff --git a/src/routes/PageNotFound/index.js b/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
diff --git a/src/routes/PageNotFound/redirect.js b/src/routes/PageNotFound/redirect.js
diff --git a/src/routes/Route/components/Route.js b/src/routes/Route/components/Route.js
@@ -1,32 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link, withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import { Button } from 'reactstrap'
 
 class Route extends React.Component {
   static propTypes = {
-    location : PropTypes.object.isRequired,
-    params   : PropTypes.object.isRequired,
-    router   : PropTypes.object.isRequired
+    match   : PropTypes.object.isRequired,
+    history : PropTypes.object.isRequired
   }
 
   constructor (props) {
     super(props)
     this.redirect = this.redirect.bind(this)
   }
 
-  redirect () {
-    this.props.router.push('/form')
+  redirect = () => {
+    this.props.history.push('/form')
   }
 
   render () {
-    const { params, location } = this.props
-
     return (
       <div>
         <div>
-          <Link to='/test'>id: {params.id}</Link>
-          <p>Path: {location.pathname} </p>
+          <h3>id: {this.props.match.params.id}</h3>
+          <p>Path: {this.props.match.url} </p>
         </div>
         <div>
           <Button color='link' style={{ cursor : 'pointer' }} onClick={this.redirect}>Go</Button>
diff --git a/src/routes/Route/index.js b/src/routes/Route/index.js
@@ -1,9 +1,3 @@
-export default (store) => ({
-  path : 'route/:id',
-  getComponent (nextState, cb) {
-    require.ensure([], (require) => {
-      const Route = require('./components/Route').default
-      cb(null, Route)
-    }, 'route')
-  }
-})
+import Route from './components/Route'
+
+export default Route
diff --git a/src/routes/Zen/index.js b/src/routes/Zen/index.js
@@ -1,15 +1,8 @@
 import { injectReducer } from '../../store/reducers'
+import { store } from '../../main'
+import Zen from './containers/ZenContainer'
+import reducer from './modules/zen'
 
-export default (store) => ({
-  path : 'zen',
-  getComponent (nextState, cb) {
-    require.ensure([], (require) => {
-      const Zen = require('./containers/ZenContainer').default
-      const reducer = require('./modules/zen').default
+injectReducer(store, { key : 'zen', reducer })
 
-      injectReducer(store, { key : 'zen', reducer })
-
-      cb(null, Zen)
-    }, 'zen')
-  }
-})
+export default Zen
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -1,25 +1,19 @@
-import CoreLayout from '../layouts/PageLayout/PageLayout'
+import asyncComponent from '../components/AsyncComponent'
 import Home from './Home'
-import CounterRoute from './Counter'
-import ZenRoute from './Zen'
-import ElapseRoute from './Elapse'
-import RouteRoute from './Route'
-import PageNotFound from './PageNotFound'
-import Redirect from './PageNotFound/redirect'
 
-/* react-router PlainRoute objects */
-export const createRoutes = (store) => ({
-  path        : '/',
-  component   : CoreLayout,
-  indexRoute  : Home,
-  childRoutes : [
-    CounterRoute(store),
-    ZenRoute(store),
-    ElapseRoute(store),
-    RouteRoute(store),
-    PageNotFound(),
-    Redirect
-  ]
-})
-
-export default createRoutes
+export default Home
+export const AsyncCounter = asyncComponent(() => import(
+  /* webpackChunkName: "counter" */
+  './Counter'))
+export const AsyncZen = asyncComponent(() => import(
+  /* webpackChunkName: "zen" */
+  './Zen'))
+export const AsyncElapse = asyncComponent(() => import(
+  /* webpackChunkName: "elapse" */
+  './Elapse'))
+export const AsyncRoute = asyncComponent(() => import(
+  /* webpackChunkName: "route" */
+  './Route'))
+export const AsyncPageNotFound = asyncComponent(() => import(
+  /* webpackChunkName: "pageNotFound" */
+  './PageNotFound'))

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import './PageNotFound.scss'`
`5`	`5`	`import { withRouter } from 'react-router'`
`6`	`6`	`import { Button } from 'reactstrap'`
`7`	`7`
`8`		`-const PageNotFound = ({ router : { goBack } }) => (`
	`8`	`+const PageNotFound = ({ history : { goBack } }) => (`
`9`	`9`	`<div className='not-found__container'>`
`10`	`10`	`<p>Page not found!!!</p>`
`11`	`11`	`<div>`
`@@ -16,7 +16,7 @@ const PageNotFound = ({ router : { goBack } }) => (`
`16`	`16`	`)`
`17`	`17`
`18`	`18`	`PageNotFound.propTypes = {`
`19`		`- router : PropTypes.object.isRequired`
	`19`	`+ history : PropTypes.object.isRequired`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`export default withRouter(PageNotFound)`