react 項目準(zhǔn)備的時候路由的集成思路，發(fā)出來，希望可以一起交流。

由于我用的最新版本 react ，所以懶加載用 loadable-components 代替 react-loadable。

router.js

/**
 * 思路是通過此文件集中反映路由
 * 所有頁面中的路由都從此文件定義
 * 不同組件會有不同的路由（如appRoutes，就是 App.js 文件里的路由）
 * 注意返回的是一段 JSX，使用時 {nameRoutes} 即可
 */
import React from 'react'
import styled from 'styled-components'
import {Route} from 'react-router-dom'
import loadable from '@loadable/component'

import home from '@/pages/home'

const MyRoute = styled(Route).attrs(props=>({
  exact:props.exact?props.exact:true,
}))``

const getRoutes = routesArray => routesArray.map(obj => <MyRoute key={obj.path} {...obj}/>)

/**
 * ** lazy 生成懶加載組件的函數(shù) **
 * 
 * !注意
 * 經(jīng)測如果函數(shù) lazy 傳入的 path 參數(shù)與 import(`${props.path}`) 對應(yīng)的參數(shù)直接為路徑時，不能用 webpack 自定的路徑，如 @ 指定路徑，即如下組合會報錯
 *   component:lazy("@/pages/detail")
 *   import(`${props.path}`)
 *      報錯：Error: Cannot find module './pages/detail'
 * 
 * 如果路徑改為相對路徑則沒有了此問題：
 *   component:lazy("./pages/detail")
 *   import(`${props.path}`)
 *      成功
 * 
 * 或者不用參數(shù)傳入?yún)s沒有這樣的限制
 *   component:loadable(() => import('@/pages/detail'))
 * 
 * 如果還是想用 webpack 自定義的路徑，則可這樣用：
 *   import(`@/${props.path}`)
 *   component:lazy("pages/detail")
 *      成功
 */

const lazy = path => {
  const AsyncPage = loadable(props => import(`@/${props.path}`))

  return () => <AsyncPage path={path} />
}

// App.js 頁面路由組
export const appRoutes = getRoutes([
  {
    path:'/',
    component:home
  },{
    path:'/detail/:id',
    component:lazy("pages/detail")
  }
])