全栈的自我修养 ———— 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;
相关推荐
耶啵奶膘几秒前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹2 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉17 分钟前
STM32添加库函数
java·javascript·stm32
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
w2sfot2 小时前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴2 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
前端Hardy2 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy2 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙3 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
hj5914_前端新手3 小时前
React 基础 - useState、useContext/createContext
前端·react.js