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
    

    很简单把~~




  • 相关阅读:
    基于mysql-JDBC的java编程(通过java连接数据库)
    mysql-windows系统上的安装配置
    Jsp编程的基础模型
    CSPRNG随机数产生器
    IntlChar()
    unserialize()过滤机制
    Closure::call()
    PHP匿名类
    LINUX 安装PHP7教程
    解析UNICODE方法
  • 原文地址:https://www.cnblogs.com/jiemao/p/9670416.html
Copyright © 2011-2022 走看看