refactor(routes): 路由集中在routes/index 配置

Author: Sven

src/layouts/PageLayout/PageLayout.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import { NavLink as Link, Switch, Route, Redirect } from 'react-router-dom'
+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 Home, { AsyncCounter, AsyncZen, AsyncElapse, AsyncRoute, AsyncPageNotFound } from '../../routes'
+import Routes from '../../routes'
 
 const location = {
   pathname : '/route/8080',
@@ -50,15 +50,7 @@ export default class PageLayout extends React.Component {
           </Collapse>
         </Navbar>
         <Container className='text-center page-layout__viewport'>
-          <Switch>
-            <Route exact path='/' component={Home} />
-            <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>
+          <Routes />
         </Container>
       </div>
     )

src/routes/index.js

@@ -1,19 +1,34 @@
 import asyncComponent from '../components/AsyncComponent'
 import Home from './Home'
+import { Switch, Route, Redirect } from 'react-router-dom'
+import React from 'react'
 
-export default Home
-export const AsyncCounter = asyncComponent(() => import(
+const AsyncCounter = asyncComponent(() => import(
   /* webpackChunkName: "counter" */
   './Counter'))
-export const AsyncZen = asyncComponent(() => import(
+const AsyncZen = asyncComponent(() => import(
   /* webpackChunkName: "zen" */
   './Zen'))
-export const AsyncElapse = asyncComponent(() => import(
+const AsyncElapse = asyncComponent(() => import(
   /* webpackChunkName: "elapse" */
   './Elapse'))
-export const AsyncRoute = asyncComponent(() => import(
+const AsyncRoute = asyncComponent(() => import(
   /* webpackChunkName: "route" */
   './Route'))
-export const AsyncPageNotFound = asyncComponent(() => import(
+const AsyncPageNotFound = asyncComponent(() => import(
   /* webpackChunkName: "pageNotFound" */
   './PageNotFound'))
+
+const Routes = () => (
+  <Switch>
+    <Route exact path='/' component={Home} />
+    <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>
+)
+
+export default Routes