程序员经验分享-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实战 的相关文章

  • 当标题中包含“&”时，电子邮件标题无法正确显示，如何在 JavaScript 中修复？

    我有一些代码以以下格式显示文章标题列表 简短描述和作者姓名 标题 作者姓名 描述 作者的姓名和描述与此处无关 因为它们始终显示正确 大多数标题也可以正确显示 以下是一些虚构的示例 关于银行业务您需要了解的最重要的一件事 作者姓名 正确显示

  • 使用 Jquery 附加链接

    我正在尝试根据您所在的页面添加指向我的页面的链接 我使用 Squarespace 来构建这个网站 因此对我来说最简单的方法是使用 Javascript 或 Jquery 我认为我缺少的这个语法有问题 我已经尝试用 来打破引号 但这不起作用

  • Excel 宏与 Javascript

    我希望使用 Javascript 中的宏而不是默认的 VBA 来操作 Excel 电子表格 我可以使用以下 VBA 代码执行 javascript 代码 javascript to execute Dim b As String b fun

  • 用于传输命名参数和正文的云端点资源属性不起作用

    我正在尝试通过gapi client rpc调用实现对谷歌云端点的调用 如文档中所述 和Google Cloud Endpoints 使用 JS 客户端进行调用 传递参数和 JSON 正文 https stackoverflow com q

  • 如何解构 React props 并仍然访问其他 props？

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff

  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di

  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为

  • 如何在美人鱼节点描述中添加链接？

    我想 如下图所示 div class mermaid graph TD A hello B an b important b link A gt B div 在下面添加实际链接link指向http google com 我尝试将相关节点修改

  • 可选回调的 JavaScript 样式

    我有一些函数偶尔 并非总是 会收到回调并运行它 检查回调是否已定义 函数是一种好的风格还是有更好的方法 Example function save callback do stuff if typeof callback undefined

  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到

  • JavaScript 中的最短路径

    几周来我一直在寻找一种在 JavaScript 中计算最短路径的方法 我一直在玩书数据结构和算法作者 格罗纳 Groner 名字恰如其分 https github com loiane javascript datastructs algo

  • Facebook API Javascript JSON 响应

    function getUser FB api me function response console log Response is response alert Your name is response first name ale

  • 如何显示 GroupList 的 FormArray？

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup

  • 如何使用 Jquery .animate() 函数创建连续滚动内容？ [复制]

    这个问题在这里已经有答案了 可能的重复 在jquery中实现圆形滚动条 https stackoverflow com questions 812049 implementing circular scroller in jquery 我想

  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr

  • 有没有办法从画布上清除一个元素而不消除其他元素？

    我正在使用画布构建页面加载器 并使用 es6 类 虽然目前我无法使其正常工作 原因之一是我找不到清除画布的方法进展 到目前为止 这是我的代码 class Loader constructor width height this width

  • JavaScript 正则表达式两个标签之间的多行文本

    我编写了一个正则表达式来从 HTML 中获取字符串 但似乎多行标志不起作用 这是我的模式 我想将文本输入h1 tag var pattern div class box content 5 h1 lt lt h1 gt mi m html

  • 如何调试 Node.js 应用程序？

    如何调试 Node js 服务器应用程序 现在我主要使用警报调试打印语句如下 sys puts sys inspect someVariable 一定有更好的调试方法 我知道谷歌浏览器 http en wikipedia org wiki

  • 错误：模块“html”不提供视图引擎（Express）

    我正在尝试设置一个简单的路由应用程序 但在渲染页面时不断遇到错误 Error Module html does not provide a view engine 奇怪的是我已经在 app js 文件中指定了视图引擎 但仍然收到错误 app

  • Angular 2：使用正则表达式进行数字验证

    我正在尝试验证 IE 11 中的数字字段

随机推荐

  • 助你解锁万物智联新机遇 —— 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的产物部署到各个场景里面 初始化

热门标签