美文网首页技术干货
react-router、loadable-components

react-router、loadable-components

作者: MaramLee | 来源:发表于2020-02-02 15:30 被阅读0次

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

    相关文章

      网友评论

        本文标题:react-router、loadable-components

        本文链接:https://www.haomeiwen.com/subject/modqxhtx.html