浅谈umi router

前言
基础路由
layout

前言

最近学习UmiJS，在umi-router上踩了许多坑，现记录下所学。

基础路由

假设 pages 目录结构如下：

+ pages/+ users/- index.js- list.js- index.js

那么，umi 会自动生成路由配置如下：

[{ path: '/', component: './pages/index.js' },{ path: '/users/', component: './pages/users/index.js' },{ path: '/users/list', component: './pages/users/list.js' },
]

也就是说，不用创建类似router.js做路由管理，umi会根据你文件的层级自动创建相应路由

ps：
关于动态路由，可以看我写的这篇笔记

layout

umi约定，通过 src/layouts/index.js 文件来作为全局路由

实际上就是在你的路由外面嵌套了一层。

目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout 。

比如以下目录结构：

+ pages/+ users/- _layout.js- id.js- index.js

会生成路由配置如下：

[{ path: '/users': component: './pages/users/_layout.js'routes: [{ path: '/users/', component: './pages/users/index.js' },{ path: '/users/id', component: './pages/users/id.js' },],},
]

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

比如：

export default  class App extends PureComponent {render(){const {children} = this.porps;return ({ children });}
}

有的同学卡在这里，只需要打印一下children就知道了。

浅谈umi router相关推荐

父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
浅谈前后端分离与实践之 nodejs 中间层服务
一.背景书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...
浅谈koa跨域问题及koa2-cors中间件
浅谈koa跨域问题及koa2-cors中间件什么是跨域跨域请求资源的方法 koa中如何设置跨域 koa2-cors应答跨域请求实现什么是跨域由于浏览器同源策略,凡是发送请求url的协议.域名. ...
手机热点设置虚拟服务器,以三款路由器为例，浅谈手机热点中继路由器的设置方法...
以三款路由器为例,浅谈手机热点中继路由器的设置方法 2017-01-23 22:37:04 43点赞 328收藏 36评论前言各位值友,新年好! 这篇文章写一点路由使用心得.在此之前,我和许多人一 ...
三英战豪强，思绪走四方。浅谈我眼中的express、koa和koa2
支持原创,本文为转载文章,转载是为了备忘或丢失,这么好的文章. https://www.jianshu.com/p/3806417a1991?from=timeline 前言跟好朋友打赌,我要来个技 ...
浅谈MySQL存储引擎-InnoDBMyISAM
浅谈MySQL存储引擎-InnoDB&MyISAM 存储引擎在MySQL的逻辑架构中位于第三层,负责MySQL中的数据的存储和提取.MySQL存储引擎有很多,不同的存储引擎保存数据和索引的方式 ...
【大话设计模式】——浅谈设计模式基础
初学设计模式给我最大的感受是:人类真是伟大啊!单单是设计模式的基础课程就让我感受到了强烈的生活气息. 个人感觉<大话设计模式>这本书写的真好.让貌似非常晦涩难懂的设计模式变的生活化.趣味化 ...
学校计算机机房好处,浅谈学校计算机机房维护
浅谈学校计算机机房维护现在的学校机房都配置了数量较多的计算机,而且机房的使用非常频繁.对于怎样维护好计算机,特别是计算机软件系统,对广大计算机教师来说是一个很重要且非常现实的问题.下面就本人在 ...
java 中的单元测试_浅谈Java 中的单元测试
单元测试编写 Junit 单元测试框架对于Java语言而言,其单元测试框架,有Junit和TestNG这两种, 下面是一个典型的JUnit测试类的结构 package com.example.dem ...

浅谈umi router

浅谈umi router

前言

基础路由

layout

浅谈umi router相关推荐

最新文章

热门文章