react-router、loadable-components 懒加载集成思路

react 项目准备的时候路由的集成思路，发出来，希望可以一起交流。

由于我用的最新版本 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 生成懒加载组件的函数 **
 * 
 * !注意
 * 经测如果函数 lazy 传入的 path 参数与 import(`${props.path}`) 对应的参数直接为路径时，不能用 webpack 自定的路径，如 @ 指定路径，即如下组合会报错
 *   component:lazy("@/pages/detail")
 *   import(`${props.path}`)
 *      报错：Error: Cannot find module './pages/detail'
 * 
 * 如果路径改为相对路径则没有了此问题：
 *   component:lazy("./pages/detail")
 *   import(`${props.path}`)
 *      成功
 * 
 * 或者不用参数传入却没有这样的限制
 *   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")
  }
])