【DvaJS】Router（下）

Router动态加载

修改 router.js 文件：

import React from 'react'
import { Router, Switch } from 'dva/router'
import SubRoutes from './components/SubRoutes'

// 01、 配置路由
const RouteConfig = [
  {
    path: '/',
    // component: IndexPage,
    model: [], 
    component: () => import('./pages/IndexPage'),  // 动态加载模块
    routes: [
        {
            path: '/home',
            // component: Home,
            model: [import('./models/home')],
            component: () => import('./pages/Home'),
            redirect: true,
            isAuthority: true,
        }, {
            path: '/manage',
            model: [],
            component: () => import('./pages/Manage'),
            isAuthority: true,

        }
    ]
  }
]

// 02、渲染
function RouterConfig({ history, app }) {
  return (
    <Router history={history}>
      <Switch>
        {RouteConfig.map((route, i) =>  
            <SubRoutes {...route} key={i} app={app} />
        )}
      </Switch>
    </Router>
  );
}

export default RouterConfig;

修改 IndexPage.js 文件：

// 03、app 模块
function IndexPage(props) {
    const { routes, app } = props
    return (
        ...
           <Switch>
                {routes.map((route, i) => <SubRoutes {...route} key={i} app={app} />)} 
           </Switch>
        ...
    )
}

`

修改 SubRoutes 下的文件：

// 04、解决动态加载路由组件的方法
const DynamicComponent = (app, model, component, routes ) => dynamic({
    app,
    models: () => model,
    component: () => 
        component().then(res => {
            const Component = res.default || res;
            return props => <Component {...props} app={app} routes={routes} />
        }),
  });

export default function SubRoutes({routes, component, app, model}) {
    return (
        <Route component={DynamicComponent(app, model, component, routes)} /> 
    )
}

注意：dva-dynamic 可查看官网 API。

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

Router动态加载

标签

参与社区