程序员经验分享-hwhale

react umi实战

2023-11-19

umi

  • umiJs是一个类Next.JS的react开发框架
  • 它基于一个约定，即pages目录下的文件即路由，而文件则导出react组件。
  • 然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各个场景里面
    在这里插入图片描述

初始化项目

npm i umi -g
在这里插入图片描述
umi g page index 在这里插入图片描述
在这里插入图片描述
dev也是基于webpack-dev-server启动的。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
约定式路由。
跳转
在这里插入图片描述

全局layout

约定src/layouts/index.js为全局组件，返回一个React组件，通过props.children渲染子组件。
在这里插入图片描述

有点类似react-route v6的OutLat，或者vue的router-view
在这里插入图片描述
在这里插入图片描述

嵌套路由

umi约定目录下有_layout.js使生成嵌套路由，在这里插入图片描述
像这种有二级路由的以文件夹为主，在这里插入图片描述
user组件会以_layout为主渲染，而他下面的子路由则渲染子props.children里面。
在这里插入图片描述
在这里插入图片描述
这种方式就是约定式路由+声明式路由,umi也有配置式路由。

动态路由

约定以[]包裹的文件或者文件夹为动态路由
在这里插入图片描述
在这里插入图片描述
这种动态路由也可以被渲染。
在这里插入图片描述
在这里插入图片描述

权限路由,路由守卫

通过指定高阶组件的wrappers属性达成效果。
wrappers路面放着路劲。在这里插入图片描述

在这里插入图片描述
每次点击Profile就跳不过去了。

动态注册路由

以src下的app.js为约定。
在这里插入图片描述
注意这个Foo不在pages里面。
动态注册
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

mock数据

约定/mock下所有的的文件为mock文件在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

react系列（2）

ReactJS

javascript

前端

react umi实战 的相关文章

随机推荐

  • 助你解锁万物智联新机遇 —— YMatrix 超融合数据库

    近期 在 YMatrix 5 0 发布会上 四维纵横创始人 CEO 姚延栋分享了 返璞归真 以简驭繁 YMatrix 超融合数据库 5 0 发布 的主题演讲 在本次演讲中 介绍 YMatrix 超融合数据库的发展历程及现阶段的技术痛点 深入

  • Leetcode Shortest Palindrome (最短回文串)

    Leetcode Shortest Palindrome 最短回文串 题目描述 Given a string S you are allowed to convert it to a palindrome by adding charact

  • clang 01. clang driver流程分析

    文章目录 前言 在这里简要概述一下clang的流程 1 clang driver代码分析 1 1创建诊断 DIagnosticsEngine 实例 1 2创建Driver clang driver Driver 的实例 1 3通过 Driv

  • 计算机勾兑双绝是谁发明,勾兑大师范玉平之“舌尖上的五粮液”

    1958年 那是一个热火朝天的时代 在五粮液酒厂的仓库里 人们总能看到一位斯斯文文的小伙子 在一阵阵紧张的收货发货后 不紧不慢地将那些大大小小的酒坛收拾得整整齐齐 之后他便一边对着账本 一边慢条斯理地抿着小酒 尽管他手中的酒杯里常常只有半杯

  • 网页是如何显示在浏览器

    这两天学习了一些网页如何在浏览器中显示的知识 感觉在我向前端走的路上非常有用 所以就在这里总结一下 大家可以看看 我也算是巩固一下知识 因为自己学识太浅 内容可能有一些错误之处 希望看到的朋友可以指出来啦 在Edge浏览器也加入Chromi

  • 低投入也有高效率！Fortinet 安全 SD-WAN方案赋能金融保险行业

    当前 金融保险等行业进入数字化转型的快速发展阶段 数字化效能不断提升的同时 也对广域网等基础IT建设提出了更高的需求 某保险公司在全国的省级分公司和多级分支机构多达上百家 近年来 蓬勃的数字化应用对其广域网带来了巨大挑战 该公司采用Fort

  • ARGB,RGB颜色值表示

    转载请注明出处 http blog csdn net wei chong chong article details 50831493 今天自定义一个控件 设置背景颜色时犯难了 现在就来总结一下android中的颜色值表示 android

  • 9月，Java岗爆了！

    你有面试机会了吗 随着金九银十到来 肯定有很多小伙伴想抓住一年两次的机会 开始疯狂投简历了吧 但是事实是 投出去的简历基本上HR都是已读不回 收到面试邀请 被告知不用面试了 参加了面试 就像走了个过场 成了HR的业绩指标 面试通过 但是被放

  • LWIP在STM32上的移植

    本文做记录摘抄 加上自己的体会 文章标题 STM32使用LWIP实现DHCP客户端 http www cnblogs com dengxiaojun p 4379545 html 该文章介绍了几点 LWIP源码的内容 关键点 1 inclu

  • id选择器和class选择器

    id选择器 id选择器用来选取带有给定id属性的元素 语法 id例如 html div div css container color blue id选择器的一些特征 1 id选择器以 号开头 后跟元素的id属性值 2 id选择器只能选取带

  • 英伟达最新开源

    Title FasterViT Fast Vision Transformers with Hierarchical Attention Paper https arxiv org pdf 2306 06189 pdf Code https

  • 《Terraform 101 从入门到实践》 Functions函数

    Terraform 101 从入门到实践 这本小册在南瓜慢说官方网站和GitHub两个地方同步更新 书中的示例代码也是放在GitHub上 方便大家参考查看 Terraform的函数 Terraform为了让大家在表达式上可以更加灵活方便地进

  • 计算从指定日期开始的第几周的周几的日期

    项目场景 拿到的排课表数据 里面没有具体日期 而是第几周 周几的形式 需要转换成具体日期 问题描述 其中的周几是从周一开始的 从1 到7 转换时也是按这个顺序来 原因分析 先需要获取到学期开始的日期 例 date1 得出是周几 例 周3 是

  • Java实现动态数组

    Java中动态数组的实现是非常常见的数据结构 可以用来存储一组数据并动态调整数组的大小 本文将以 Java 语言为例 介绍如何实现一个简单的动态数组 其中包含基本操作如增加 删除 查询和遍历等 1 定义动态数组 在Java中 可以使用int

  • systemc verilog IEEE 注册登录下载

    https accellera org downloads standards systemrdl SystemRDL 2 0 SystemRDL Register Description Language 一次定义 多种HDL语言场合使用

  • 深入了解计算机端口（2）

    转载 url http www exam8 com computer spks ziliao ws 200504 10798 2 html url Virtualizing DNS DHCP Soft appliances for easy

  • Webstorm使用心得

    原文来自 http www jianshu com p 4ce97b360c13 Webstorm 大多数配置都在File gt Settings选项卡中进行的 也许你不得不第一个记住它的快捷键 Ctrl Alt S 1 设置开发工具主题

  • Edraw Max教程】如何有趣的创建梦幻般的思维导图

    Edraw Max 亿图图示 是一款综合图形图表制作软件 它包含丰富的实例和模版 帮助您轻松创建流程图 网络拓扑图 组织结构图 商业图表 工程图 思维导图 软件设计图和平面布局图等 亿图采用更智能和人性化的绘制方式 最大程度帮助设计者降低工

  • 九度OJ 1193：矩阵转置 （矩阵计算）

    时间限制 1 秒 内存限制 32 兆 特殊判题 否 提交 1673 解决 1132 题目描述 输入一个N N的矩阵 将其转置后输出 要求 不得使用任何数组 就地逆置 输入 输入的第一行包括一个整数N 1 lt N lt 100 代表矩阵的维

  • react umi实战

    umi umiJs是一个类Next JS的react开发框架 它基于一个约定 即pages目录下的文件即路由 而文件则导出react组件 然后打通从源码到产物的每个阶段 并配以完善的插件体系 让我们能把umi的产物部署到各个场景里面 初始化

热门标签