useRoutes与React.lazy的使用

注意react-router-dom的版本6.3.0 和reac版本18.0.0
routeConfig.js

import React from 'react';
const Dashboard = React.lazy(() => import('../components/Dashboard'));
const DashboardMessages = React.lazy(() => import('../components/DashboardMessages'));
const DashboardTasks = React.lazy(() => import('../components/DashboardTasks'));
const AboutPage = React.lazy(() => import('../components/AboutPage'));let  routeConfig = [{path: "/",element: <Dashboard />,children: [{path: "messages",element: <DashboardMessages />,},{ path: "tasks", element: <DashboardTasks /> },],},{ path: "team", element: <AboutPage /> },];export default RrouteConfig

App.js

import routeConfig from './routeConfig.js'
import { Spin } from 'antd';
import React from 'react';
import {useRoutes
} from 'react-router-dom';
const Routes = () => {const elements = useRoutes(routeConfig);return elements;
}
const App =  () => {return (<div><React.Suspense  fallback={<Spin />}><Components /></React.Suspense></div>);
};
export default App;

参考
https://reactrouter.com/docs/en/v6/hooks/use-routes
https://stackoverflow.com/questions/65880299/lazy-loading-with-react-router-v6-beta

useRoutes与React.lazy的使用相关推荐

react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
React v16.6.0已经发布快一年了,为保障项目迭代发布,没有及时更新react版本,最近由于开启了新项目,于是使用新的react版本进行了项目开发.项目工程如何搭建,如何满足兼容性要求,如何规 ...
react-activation缓存React.lazy异步组件问题记录
1.背景当前框架使用的路由规则是使用React.lazy动态绘制的,使用KeepAlive组件缓存时一直不能缓存 export const RouteWithChildrenSubRoutes = ...
React.lazy与Suspence实现延迟加载
React.lazy与Suspence实现延迟加载 1 代码分割 2 React.Lazy 3 Suspense 4 备注 1 代码分割代码分割能够创建多个包并在运行时动态加载,它能够帮助我们&qu ...
React.lazy()
React.lazy 能实现像渲染常规组件一样处理动态引入的组件. 允许你定义一个动态加载的组件.这有助于缩减 bundle 的体积,并延迟加载在初次渲染时未用到的组件. import React, ...
react hook之React.lazy()
也不怕大家笑话,看到react.lazy()我第一个想到的居然是vue 中的一个vue-lazy 用户懒加载的插件.但是这两个差别还是有点大的. 好了我们言归正传,开始来看看我们的react.lazy ...
【react】React.lazy
注意:React.lazy 和 Suspense 技术还不支持服务端渲染.如果你想要在使用服务端渲染的应用中使用,我们推荐 Loadable Components 这个库.它有一个很棒的服务端渲染打包 ...
React开发（203）:react代码分割之React.lazy
react.lazy 路由懒加载_Vue面试题：如何实现路由懒加载？
非懒加载 import List from '@/components/list.vue' const router = new VueRouter({routes: [{ path: '/list' ...
react 日历组件_anujs1.5.1支持React.Suspense与lazy
React16是一个实验版本,除了测试它的新fiber架构外,还添加了大量新功能.其他React.Suspense与React.lazy就是重磅中的重磅. 随着前端的APP化,不断集成功能,页面越来越 ...

useRoutes与React.lazy的使用

useRoutes与React.lazy的使用相关推荐

最新文章

热门文章