H5 SPA配置

简单介绍

H5入口文件spa配置

使用说明

入口文件 index.web.js 配置示例如下

import React from 'react';
import './src/config';
import Detail from './src/pages/detail';

// 按需加载页面需要使用lazy包裹
// 非按需加载页面直接配置component 参考detail引入方式
const lazy = Ext.lazy;
// 暴露给qrn-ext
// component和path映射
// key是 page的className
// path: 路由 page: 页面
Ext.defaults.SPA_CONFIG = {
  AppContainer: {
    path: '/qrn_demo_rn_App/',
    page: lazy(() => import(/* webpackChunkName: 'app' */'./src/pages/hotelDetail/src/Detail/index'))
  },
  App: {
    path: '/qrn_demo_rn_App/app',
    page: Detail
  },
  AppContainersss: {
    path: '/qrn_demo_rn_App/appContainersss',
    page: lazy(() => import(/* webpackChunkName: 'test' */'./src/pages/hotelDetail/src/Detail2/index'))
  },
  AppContainersss2: {
    path: '/qrn_demo_rn_App/appContainersss2',
    page: lazy(() => import(/* webpackChunkName: 'list' */'./src/pages/hotelDetail/src/Detail3/index'))
  }
};
// spa页面间loading
Ext.defaults.SPA_LOADING = <div>this is loading</div>;

// 页面初始化
Ext.renderSpa();

注意

1. Ext.defaults.SPA_CONFIG 中key值是页面组件的className;
2. spa可以使用 Ext.open 打开子页面 也可以使用暴露在组件props.param上的histroy对象进行跳转