React路由配置和异步加载

1.安装配置

1. cnpm i react-router-dom -S
2. cnpm i react-loadable -S

2.在components文件下创建组件MyLoadable

MyLoadable代码

import React from 'react';
import MyLoadable from 'react-loadable'

const Loading = () => <div>loading</div>

export default function (loader, loading = Loading) {
    return MyLoadable({
        loader,
        loading
    })
}

3.在src目录下创建router文件夹(内包含assembly.js,index.jsx)

assembly.js代码

import MyLoadable from '@@/MyLoadable'

const Home = MyLoadable(() => import('@/pages/home'))
const List = MyLoadable(() => import('@/pages/list'))
const Login = MyLoadable(() => import('@/pages/login'))

export {
    Home,
    List,
    Login
}

index.jsx:
使用BrowserRouter，配置路由，页面级从assembly引入

4.在全局index.js文件内引入router

以单标签格式放入render中