全栈的自我修养 ———— 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;
相关推荐
vvilkim16 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿20 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年21 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉1 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习