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")
}
])
