笔记二十六、React中路由懒加载的扩展使用

末蓝、 2024-05-01 16:24 9阅读 0赞

![c882256ec7de4bf79975f5f8626429d1.png][]

### 26.1 在路由中配置懒加载 lazy ###

routes/index.jsx

![df038cc2c6444e10b20db50d678c508a.png][]

代码

import {Navigate} from "react-router-dom";
    import Home from "../components/Home";
    import About from "../components/About";
    // import Classify from "../components/Home/components/Classify.jsx";
    // import Navigation from "../components/Home/components/Navigation.jsx";
    import {lazy} from "react";
    
    //动态引入路径传入lazy函数
    const Classify = lazy(() => import("../components/Home/components/Classify"));
    const Navigation = lazy(() => import("../components/Home/components/Navigation"));
    
    export default [
        {
            path: '/home',
            element: <Home/>,
            children: [
                {
                    path: 'classify',
                    element: <Classify/>
                },
                {
                    path: 'navigation',
                    element: <Navigation/>
                },
            ]
        },
        {
            path: '/about',
            element: <About/>,
        },
        {
            path: '/',
            element: <Navigate to='about'/>,
        }
    ]

### 26.2 Home/index.jsx 在父组件中使用 Suspense ###

![dc277be756b04ef2a8d2a826f3f43629.png][]

代码

import React, {Suspense} from "react";
    import {NavLink, Outlet, useNavigate} from "react-router-dom";
    
    const Home = () => {
    
        // 类组件中不能用const定义变量
        // 选中高亮
        const activeStyle = ({isActive}) => {
            return isActive ? 'background' : "";
        };
    
        // 编程式路由导航
        const navigate = useNavigate();
        const toClassify = () => {
            navigate('classify', {state: {param_C: 'elendalee', param_D: 20}})
        };
    
        return (
            <div>
                首页的页面
                <div style={
       {display: "flex", justifyContent: 'center', marginTop: '20px'}}>
                    <button onClick={toClassify}>classify</button>
                    <NavLink to='navigation' className={activeStyle}>navigation</NavLink>
                </div>
                <div style={
       {background: 'red'}}>
                    {/*fallback 兜底样式loading...*/}
                    <Suspense fallback={<h2>loading...</h2>}>
                        {/**/}
                        <Outlet/>
                    </Suspense>
                </div>
            </div>);
    
    }
    
    export default Home;

[c882256ec7de4bf79975f5f8626429d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/a039fb2430f548868e293fb31ccd2f1e.png
[df038cc2c6444e10b20db50d678c508a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/650b4d814c264c14a99c62eb9888fce5.png
[dc277be756b04ef2a8d2a826f3f43629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/973aa7e8304543e69e7339e216cb6727.png