全栈的自我修养 ———— react中router入门+路由懒加载

router

下载router

npm install react-router-dom

配置view

如下将组件倒出

js 复制代码
const Login = () => {
    return <div>这是登陆</div>
}
export default Login

创建目录

配置index.js

React.lazy有路由懒加载的功能,以免白屏、加载时间太长,

会看当前使用的组件,首先导入需要的,其他组件缓存加载!

fallback中也支持添加一个组件,这个组件在加载时候会出来显示

js 复制代码
import { createBrowserRouter } from 'react-router-dom'
import { Suspense } from 'react';
import React from 'react';
const LazyLogin = React.lazy(() => import('../view/Login'));
const LazyIndex = React.lazy(() => import('../view/Index'));
const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLogin></LazyLogin>
      </Suspense>
    )
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLogin></LazyLogin>
      </Suspense>
    )
  },
  {
    path: '/index',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyIndex></LazyIndex>
      </Suspense>
    )
  }
]);

export default router;
相关推荐
煸橙干儿~~1 分钟前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒3 分钟前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od
安冬的码畜日常10 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
Q_w774242 分钟前
一个真实可用的登录界面!
javascript·mysql·php·html5·网站登录
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
一丝晨光1 小时前
C++、Ruby和JavaScript
java·开发语言·javascript·c++·python·c·ruby
Front思1 小时前
vue使用高德地图
javascript·vue.js·ecmascript
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己2 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
长天一色3 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript