美文网首页
React懒加载实现(路由):React.lazy Suspe

React懒加载实现(路由):React.lazy Suspe

作者: JakeBless | 来源:发表于2023-04-14 22:00 被阅读0次
import { createHashRouter, RouterProvider, Navigate } from "react-router-dom";
import React, { lazy, Suspense } from "react";
const Page2 = lazy(() => import("../pages/page2"));
const routes = [
  {
    path: "/page1/",
    element: <Navigate to="/page1/page11" />,
  },
  {
    path: "/page2",
    element: (
      <Suspense>
        <Page2 />
      </Suspense>
    ),
  },
];
const router = createHashRouter(routes);

function Router() {
  return <RouterProvider router={router} />;
}
export default Router;

相关文章

  • 高级

    代码切割 懒加载 React.lazy React.lazy 目前只支持默认导出 异常捕获边界 基于路由的代码分割...

  • 搭建一套好用的react项目架构

    项目目录 组织架构 react16.x、react.hooks、react.lazy组件懒加载、react-rou...

  • 踩坑记录——React.lazy

    项目背景:一个页面内嵌三个页面组件,试图使用React.lazy懒加载实现分包加载性能优化,原本使用的是alias...

  • 在React中可以用来优化组件性能的方法

    在React中可以用来优化组件性能的方法有: 组件懒加载(React.lazy(...)和 ) Pure Comp...

  • 23.路由的懒加载

    路由的懒加载:就是需要的时候在加载 这种写法就能实现路由的懒加载

  • react18 useRoutes嵌套路由及懒加载

    之前写过react16的嵌套路由及懒加载的方案react 中的 suspense 和 lazy 与 动态路由加载[...

  • vue中组件懒加载

    vue中组件懒加载的方法 1.异步实现路由懒加载 2.import(推荐使用这种方式) 同理,路由懒加载和组件懒加...

  • React.lazy的使用方法

    平时一般引入组件都是 我们也可以使用React.lazy提供的懒加载方法动态加载组件,例如 但是值得注意的是Rea...

  • vue路由懒加载及组件懒加载

    路由 和 组件 的常用两种懒加载方式:1、vue异步组件实现路由懒加载component:resolve=>(['...

  • React 路由懒加载

    传统的两种方式 import() 符合ECMAScript提议的import()语法,该提案与普通 import ...

网友评论

      本文标题:React懒加载实现(路由):React.lazy Suspe

      本文链接:https://www.haomeiwen.com/subject/fbmtjdtx.html