首先创建Loadable.js文件(随便什么文件名)
import React from 'react';
import Loadable from 'react-loadable'
const Loading = () => <div>loading</div>
export default function (loader, loading = Loading) {
return Loadable({
loader,
loading
})
}
创建assembly.js文件
import React from 'react';
import Loadable from '@/components/Loadable'
const Shop = Loadable(() => import('@/pages/Shop'))
const Home = Loadable(() => import('@/pages/Home'))
const Types = Loadable(() => import('@/pages/Types'))
const User = Loadable(() => import('@/pages/User'))
export {
Shop,
Home,
Types,
User,
}
路由页面的引入:
import React, { Component } from 'react'
import {BrowserRouter,Switch,Route,Redirect} from 'react-router-dom'
import { Shop , Home , Types , User } from '../router/assembly'
import TabBar from "../components/TabBar"
export default class index extends Component {
render() {
return (
<BrowserRouter>
<Route path="/login" component={Login}/>
<Route path="/" render={(props)=>{
<Switch>
<Route path="/shop" component={Shop}/>
<Route path="/types" component={Types}/>
<Route path="/user" component={User}/>
<Route path="/home" component={Home}/>
<Redirect exact from="/" to="/home" />
</Switch>
<TabBar/>
}}/>
</BrowserRouter>
)
}
}