全栈的自我修养 ———— 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 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu29 分钟前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的8 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way9 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家10 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
小白变怪兽12 小时前
一、react18+项目初始化(vite)
前端·react.js
GISer_Jing13 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript