个人使用详情

最新推荐文章于 2024-09-16 08:47:17 发布

亦.落

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量83

点赞数 1

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/2301_81274510/article/details/141036171

版权

react中懒加载

import React from 'react'
import lu from './router/index'
import { useRoutes } from 'react-router-dom'
export default function App() { 

  return (
    <div>{useRoutes(lu)}</div>
  )
}

/* eslint-disable react-refresh/only-export-components */
import React, { Suspense, lazy } from 'react'; 
const Home = lazy(() => import('../view/home.tsx'));
const Login = lazy(() => import('../view/login.tsx'));
const List = lazy(() => import('../view/list.tsx'));
const Com = lazy(() => import('../view/com.tsx'));
const Publish = lazy(() => import('../view/publish.tsx'));
let lu = [
    {
        path: '/', element: (
            <Suspense fallback={<div>Loading...</div>}>
                <Home />
            </Suspense>
        ),
        children: [
            {
                path: '/list', element: (
                    <Suspense fallback={<div>Loading...</div>}>
                        <List />
                    </Suspense>
                )
            },
            {
                path: '/com', element: (
                    <Suspense fallback={<div>Loading...</div>}>
                        <Com />
                    </Suspense>
                )
            },
            {
                path: '/publish', element: (
                    <Suspense fallback={<div>Loading...</div>}>
                        <Publish />
                    </Suspense>
                )
            }
        ]
    },
    {
        path: '/login', element: (
            <Suspense fallback={<div>Loading...</div>}>
                <Login />
            </Suspense>
        )
    }
]
export default lu;