简单版react路由懒加载

最新推荐文章于 2024-10-20 22:46:32 发布

原创最新推荐文章于 2024-10-20 22:46:32 发布 · 332 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#reactjs #javascript #css #es6 #vue.js

本文详细介绍了如何在React项目中实现懒加载，通过创建Loadable组件来动态导入页面，优化了应用的初始加载时间和资源占用，提高了用户体验。

首先创建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>
        )
    }
}