umi之约定式路由

简介: umi之约定式路由

约定式路由

除配置式路由外,Umi 也支持约定式路由。约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。

如果没有 routes 配置,Umi 会进入约定式路由模式,然后分析 src/pages 目录拿到路由配置。

比如以下文件结构:

.

 └── pages

   ├── index.tsx

   └── users.tsx

会得到以下路由配置,

[

{ exact:true, path:'/', component:'@/pages/index'},

{ exact:true, path:'/users', component:'@/pages/users'},

]

需要注意的是,满足以下任意规则的文件不会被注册为路由,

  • ._ 开头的文件或目录
  • d.ts 结尾的类型定义文件
  • test.tsspec.tse2e.ts 结尾的测试文件(适用于 .js.jsx.tsx 文件)
  • componentscomponent 目录
  • utilsutil 目录
  • 不是 .js.jsx.ts.tsx 文件
  • 文件内容不包含 JSX 元素

动态路由

约定 [] 包裹的文件或文件夹为动态路由。

比如:

  • src/pages/users/[id].tsx 会成为 /users/:id
  • src/pages/users/[id]/settings.tsx 会成为 /users/:id/settings

举个完整的例子,比如以下文件结构,

.

 └── pages

   └── [post]

     ├── index.tsx

     └── comments.tsx

   └── users

     └── [id].tsx

   └── index.tsx

会生成路由配置,

[

{ exact:true, path:'/', component:'@/pages/index'},

{ exact:true, path:'/users/:id', component:'@/pages/users/[id]'},

{ exact:true, path:'/:post/', component:'@/pages/[post]/index'},

{

   exact:true,

   path:'/:post/comments',

   component:'@/pages/[post]/comments',

},

];

动态可选路由

约定 [ $] 包裹的文件或文件夹为动态可选路由。

比如:

  • src/pages/users/[id$].tsx 会成为 /users/:id?
  • src/pages/users/[id$]/settings.tsx 会成为 /users/:id?/settings

举个完整的例子,比如以下文件结构,

.

 └── pages

   └── [post$]

     └── comments.tsx

   └── users

     └── [id$].tsx

   └── index.tsx

会生成路由配置,

[

{ exact:true, path:'/', component:'@/pages/index'},

{ exact:true, path:'/users/:id?', component:'@/pages/users/[id$]'},

{

   exact:true,

   path:'/:post?/comments',

   component:'@/pages/[post$]/comments',

},

];

嵌套路由

Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由,以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件,并通过 props.children 渲染子组件。

比如以下目录结构,

.

└── pages

   └── users

       ├── _layout.tsx

       ├── index.tsx

       └── list.tsx

会生成路由,

[

{ exact:false, path:'/users', component:'@/pages/users/_layout',

   routes:[

{ exact:true, path:'/users', component:'@/pages/users/index'},

{ exact:true, path:'/users/list', component:'@/pages/users/list'},

]

}

]

相关文章
|
1月前
|
JavaScript 前端开发 网络架构
Qiankun 微应用的路由配置方式
【10月更文挑战第4天】
134 58
|
2月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3月前
|
缓存 JavaScript
vue的多路由项目开发,您还在手动拼接路由名?
【8月更文挑战第20天】vue的多路由项目开发,您还在手动拼接路由名?
50 1
vue的多路由项目开发,您还在手动拼接路由名?
|
6月前
|
前端开发 JavaScript 中间件
koa开发实践2:为koa项目添加路由模块
koa开发实践2:为koa项目添加路由模块
130 0
|
6月前
Koa2 如何处理路由?
Koa2 如何处理路由?
43 0
|
11月前
|
资源调度 JavaScript Java
使用vue-cli搭建SPA项目->spa项目的构建,基于spa项目路由完成,基于spa项目完成嵌套路由
使用vue-cli搭建SPA项目->spa项目的构建,基于spa项目路由完成,基于spa项目完成嵌套路由
65 0
|
前端开发 JavaScript 数据安全/隐私保护
使用vue-cli搭建SPA项目及使用和路由及路由嵌套的使用
使用vue-cli搭建SPA项目及使用和路由及路由嵌套的使用
54 0
|
缓存
umi如何做一个路由的鉴权?
在wrappers文件夹创建一个index.tsx文件夹
272 0
|
前端开发 Python
DRF--路由组件和版本控制
DRF--路由组件和版本控制
|
JavaScript
[Vue]路由传参 & 命名路由
[Vue]路由传参 & 命名路由