关于umi 的配置式路由

最新推荐文章于 2023-08-05 12:44:32 发布
最新推荐文章于 2023-08-05 12:44:32 发布
阅读量9.7k 收藏 7
点赞数 3
分类专栏： 学习笔记 文章标签： umi react 配置路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44557421/article/details/88885685
版权

关于umi 的配置式路由

最近领导让我研究一下umi的配置式路由，在网上找了很多资料都是一笔带过。
在这里插入图片描述
最终找到个靠谱老哥，他详细的说明了这个配置式路由该在哪配置。

原来要把它放在.umirc.js文件里。
在这里插入图片描述
这里要注意一下这个component地址。

在这里插入图片描述
从上图来看，component的位置是相对于src/pages的。

如果觉得把路由写在.umirc.js文件里不爽的话，你也可以新建个router.js文件，然后把路由引入进来。

完。

首席外科戴夫
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
二、umi路由
rocktanga的博客
02-13 6358
一、路由 路由有三种方式，分别是，约定式路由(即文件路由，根据文件名自动配置)、编译时配置式路由(config/config.js中配置)和运行时配置式路由(src/app.js中配置) 1、约定式路由 注意：若 .umirc.(ts|js) 或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用编译时配置式路由 约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出
浅谈umi router
aieraflyyyy的博客
02-25 9830
浅谈umi router前言基础路由layout 前言 最近学习UmiJS，在umi-router上踩了许多坑，现记录下所学。 基础路由 假设 pages 目录结构如下： + pages/ + users/ - index.js - list.js - index.js 那么，umi 会自动生成路由配置如下： [ { path: '/', component: '....
umi-antd-pro::ghost:use umi conventional routing in Ant Design Pro 使用umi约定式路由多Tabs的Ant Design Pro（Antd Pro的实验项目）
05-22
English || | | 蚂蚁设计专业版 适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： http ： //pro.ant.design 文档： http : //pro.ant.design/docs/getting-started 变更日志： http : //pro.ant.design/docs/changelog 常见问题解答： http ： //pro.ant.design/docs/faq 中国镜像网站： http ： //ant-design-pro.gitee.io 2.0版现已发布！ :party_popper: :party_popper: :party_popper: 宣布Ant Design Pro 2.0.0 翻译招聘 :loudspeaker: 我们需要您的帮助： https : //github.com/ant-design/ant-design-pro/issues/120 特征 :gem_stone:
Umi从服务端动态获取路由
魔仙女王的魔法杖
05-11 5507
Umi从服务端动态获取路由背景1、前提2、过程 背景 一开始我是在route.ts文件下将路由写死，需求方提出要从服务端动态获取左侧菜单，实现动态路由 1、前提 根据UmiJs官方文档中，我们可以看到运行时配置，提供了配置项，patchRoutes({ routes })和render(oldRender: Function) patchRoutes({ routes }) ，官方demo中介绍的清清楚楚，在这我们可以获取已经配置好的路由，也可以进行修改； render(oldRender: Functi
React框架Umi实战(3)路由进阶
weixin_33719619的博客
01-16 1373
前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下 1 修改配置.umirc.js // ref: https://umijs.org/config/ export default { plugins: [ // ref: https://umi...
umi 嵌套路由 redirect 报错 Maximum update depth exceeded
芝芝为荔枝
05-06 773
umi4 父路由直接跳转到指定的子路由，umi 嵌套路由 redirect 报错 Maximum update depth exceeded
使用umi
最新发布
weixin_38441229的博客
08-05 433
umi的使用，创建和路由配置
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
热门推荐
果冻
10-11 1万+
umiJS Umi 是蚂蚁金服的底层前端框架 中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备。同时有强大的插件扩展各种功能。 什么时候不用 umi 需要支持 IE 8 或更低版本的浏览器 需要支持 React 16.8.0 以下的 React 需要跑在 Node 10 以下的环境中 有很强的 webpack 自定义需求和主观意愿 需要选择不同的路由方案 使用 确保电脑上有nodejs 10.13 或以上 umi下载安装 npm
Umi笔记---kalrry
kalrry
01-15 724
Umi笔记---kalrry一、简介：二、umi与creact-react-app的区别三、yarnyarn的安装yarn和npm 的对照表四、umi的创建五、页面创建手工创建自动创建六、6. 路由的配置七、路由导航编程式声明式--Link八、重定向与404页面九、二级多级路由十、约定式路由十一、 函数组件与类组件的优缺点 一、简介： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的
umi-customer-admin:基于umi框架构建的后台管理系统，自定义路由配置，面包屑导航，可根据需求自行权限验证和自定主题，配置使用阿里开源图标以base64编码设置字体图标
03-23
umi-customer-admin:基于umi框架构建的后台管理系统，自定义路由配置，面包屑导航，可根据需求自行权限验证和自定主题，配置使用阿里开源图标以base64编码设置字体图标
React路由鉴权的实现方法
11-30
前言 上一篇文章中有同学提到路由鉴权，由于时间关系没有写，本文将针对这一特性对 vue 和 react 做专门说明，希望同学看了以后能够受益匪浅，对你...一般我们会相应的把路由表角色菜单配置在后端，当用户未通过页面菜
umi-plugin-qiankun:Umi plugin for qiankun
05-07
Umi@2 plugin for .Umi@3 相应的 qiankun 插件请移步Installation$ npm i @umijs/plugin-qiankun@umi2 -Sor$ yarn add @umijs/plugin-qiankun@umi2Examples导航是主应用，App1 和 App2 是子应用，$ yarn$ yarn build...
umi基础框架（React+umi+Ts）
08-05
umi、dva、React
umi 路由
weixin_43294560的博客
07-18 4119
在.umirc.ts的routes进行路由配置 1、配置路由 routes:[{path:'/路径',components:'路径,@为src,不需要引入组件',exact:true}] 配置: redirect:'/重定向路由路径' title:'路由页面名称' wrappers:['/路由校验的组件路径'] 其中该组件: export default (props) => { 校验操作 return {prop
umi路由跳转和传参（基于React）
zhaojiaxing123的博客
02-20 743
在 Umi如何使用路由传参
React--Umi和Dva
qq_44930306的博客
10-12 2272
Umi 以路由为基础,解决了之前使用react-router-dom的时候使用路由的复杂度)； ​ dva 是一个基于 redux 和 redux-saga 的数据流方案 ​
umi——01——路由
x1037490413的博客
03-16 2360
umi文件夹结构 在.umirc.ts文件中将routes注释掉，则是约定式路由，在pages中写组件，url打上对应名字就会跳到对应组件（首字母大小写都能对应上），但是要注意的是首页组件index首字母必须小写，404组件则是没有相应路由时会跳到的组件。 嵌套路由 嵌套路由有时不好用就要重启一下，并且嵌套路由需要写文件夹，嵌套组件的父组件必须是_layout命名，要有下划线，子组件是Comingsoon和Nowplaying，子组件的显示可以用props.children占位，类似于Vue中的插槽，当跳
umi 路由配置
大龙帅的博客
04-05 8541
一、基础路由 项目根目录下新建文件夹：config/routes.tsx （umi约定，位置不能错，不然引入会报错） routes.tsx import type { IRoute } from 'umi'; const routes: IRoute[] = [ { path: '/', component: '@/pages/index' } ]; export default routes; .umirc.ts这个文件内引入 简单介绍下这个文件：umi的配置文件，参考官方文档 impo
umi运行时配置路由
07-27
在umi中，可以通过运行时配置来定义路由。运行时配置是指在运行时根据条件来动态生成路由配置。下面是一个示例： 1. 首先，在项目的根目录下创建一个名为 `config` 的文件夹。 2. 在 `config` 文件夹下创建一个名为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值