zoukankan      html  css  js  c++  java
  • 使用 dva 如何配置异步加载路由组件

    来源:https://www.jianshu.com/p/69694013e36b
    -----------------------------------------------------

    普通方式 文件目录:src/route.js

    import React from 'react'
    import { Router, Route, Switch } from 'dva/router'
    
    import IndexPage from './routes/IndexPage';
    import Category from './routes/Category';
    
    function RouterConfig({ history, app }) {
        return (
            <Router history={history}>
                <Switch>
                    <Route path="/" exact component={IndexPage} />
                    <Route path="/category" exact component={Category} />
                </Switch>
            </Router>
        )
    }
    
    export default RouterConfig
    

    1. 使用异步路由加载组件 在文件头部引入

    import dynamic from 'dva/dynamic'
    

    然后删除以下代码

    import IndexPage from './routes/IndexPage';
    import Category from './routes/Category';
    

    在RouteConfig函数中添加以下代码即可

    const CompontentPage = dynamic({
      component: () => import('./routes/CompontentPage')
    })
    const CompontentPage1 = dynamic({
      component: () => import('./routes/CompontentPage1')
    })
    

    完整实例

    import React from 'react'
    import { Router, Route, Switch } from 'dva/router'
    import dynamic from 'dva/dynamic'
    
    function RouterConfig({ history, app }) {
        const IndexPage = dynamic({
            app,
            component: () => import('./routes/IndexPage')
        })
        const Category = dynamic({
            app,
            component: () => import('./routes/Category')
        })
        return (
            <Router history={history}>
                <Switch>
                    <Route path="/" exact component={IndexPage} />
                    <Route path="/category" exact component={Category} />
                </Switch>
            </Router>
        )
    }
    export default RouterConfig
    

    很简单把~~




  • 相关阅读:
    sql对日期操作
    computeroperationcommand
    Convert函数对日期的应用
    编写快速、高效的JavaScript代码
    vim常用操作技巧与配置
    PureFTPd安装配置
    关于PHP代码加密和文本加密
    父页面调用iframe里的js函数相关例程,Iframe之间通讯研究
    常用JavaScript语法100讲
    计算机端口
  • 原文地址:https://www.cnblogs.com/jiemao/p/9670416.html
Copyright © 2011-2022 走看看