一、Umi路由的概念

在 Umi 中,你可以在 config/config.js 文件中使用 routes 属性来配置路由。routes 属性是一个数组,每个元素都表示一个路由对象。每个路由对象都包含以下属性:

  • path:表示路由路径,可以是字符串或正则表达式。

  • component:表示路由组件的路径,可以是字符串或函数。

  • routes:表示当前路由的子路由,也是一个路由数组。

二、定义路由表

 config / config.js 文件内容如下:

import { defineConfig } from "umi";

export default defineConfig({
routes: [
{
path: "/",
component: "Home/index"
},
{
path: "/Home2",
component: "@/pages/Home2/index",
// 嵌套路由
routes: [
{
path: "/Home2/one",
component: "@/pages/Home2/one/index"
},
{
path: "/Home2/two",
component: "@/pages/Home2/two/index"
},
]
},
],
npmClient: 'npm',
});

三、在页面上引用

在 Umi 中,你可以使用以下方式在页面中引用路由组件:

  1. 使用 Link 组件来创建链接。

Link 组件可以用于创建内部链接,layouts / index.tsx 代码如下:

import { Link, Outlet } from 'umi';
import styles from './index.less'; export default function Layout() {
return (
<div className={styles.navs}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/Home2">Home2</Link>
</li>
</ul>
<Outlet />
</div>
);
}

嵌套路由的用法也差不多,Home2 /  index.tsx 代码如下:

import { Link, Outlet } from "umi";

export default function HomePage() {
return (
<div className="homebox">
<div>
<Link to="/Home2/one">one</Link>
<Link to="/Home2/two">two</Link>
</div>
<div>
<Outlet />
</div>
</div>
);
}
  1. 使用 history 对象来进行编程式导航。

history 对象可以用于在代码中进行导航,例如:

import { history } from 'umi';

function MyComponent() {
function handleClick() {
history.push('/users');
} return (
<div>
<button onClick={handleClick}>Go to Users</button>
</div>
);
}
  1. 在页面中使用 Route 组件来渲染路由组件。

Route 组件可以用于在页面中渲染路由组件,例如:

import { Route } from 'umi';

function MyComponent() {
return (
<div>
<Route path="/users" component={Users} />
</div>
);
} function Users() {
return <div>Users Page</div>;
}

需要注意的是,在使用 Route 组件时,需要将路由组件作为 component 属性的值传递给 Route 组件。此外,还需要在路由组件中添加 export default 来导出组件。

四、带参数的路由

4.1、路由表如下配置:

export default {
routes: [
{
path: '/',
component: '@/pages/index',
},
{
path: '/users',
component: '@/pages/users/index',
routes: [
{
path: '/users/:id',
component: '@/pages/users/[id]',
},
],
},
],
};

在上述代码中,我们定义了两个路由,一个是根路由 '/',另一个是 /users 路由。在 /users 路由下,我们定义了一个子路由 /users/:id,其中 :id 表示动态路由参数。

4.2、在页面上引用:

对于路由组件的引入,我们可以使用相对路径或绝对路径,例如:

  • 相对路径:'./users/index',表示在当前目录下的 users/index.js 文件中定义路由组件。
  • 绝对路径:'@/pages/users/index',表示在项目根目录下的 src/pages/users/index.js 文件中定义路由组件。

使用动态路由参数时,需要将路由组件使用方括号包裹起来,例如:

  • '/users/:id':表示动态路由参数为 id
  • '@/pages/users/[id]':表示路由组件为 src/pages/users/[id].js

4.2.1、方法一:在 Link 组件中使用动态路由参数。

例如,你可以在页面中使用 Link 组件来创建一个带参数的链接:

import { Link } from 'umi';

function MyComponent() {
const userId = 123; return (
<div>
<Link to={`/users/${userId}`}>User Profile</Link>
</div>
);
}

在上述代码中,我们将动态路由参数 userId 插入到链接中,以创建一个带参数的链接。

4.2.2、方法二:使用 history 对象来进行编程式导航。

例如,你可以在页面中使用 history.push 方法来进行编程式导航:

import { history } from 'umi';

function MyComponent() {
const userId = 123; function handleClick() {
history.push(`/users/${userId}`);
} return (
<div>
<button onClick={handleClick}>User Profile</button>
</div>
);
}

在上述代码中,我们使用 history.push 方法来进行编程式导航,并将动态路由参数 userId 插入到路径中。

4.2.3、方法三:在页面中使用 Route 组件来渲染路由组件。

例如,你可以在页面中使用 Route 组件来渲染带参数的路由组件:

import { Route } from 'umi';

function MyComponent() {
return (
<div>
<Route path="/users/:id" component={UserProfile} />
</div>
);
} function UserProfile(props) {
const userId = props.match.params.id; return <div>User Profile for {userId}</div>;
}

在上述代码中,我们使用 Route 组件来渲染带参数的路由组件,并在组件中通过 props.match.params.id 获取动态路由参数的值。

需要注意的是,在使用带参数的路由时,需要在路由配置中将动态路由参数使用冒号 : 来表示,例如 /users/:id。此外,在路由组件中获取动态路由参数的值时,可以使用 props.match.params 对象来获取参数的值。

五、约定式路由

约定式路由是一种基于约定的路由配置方式,它是一种常见的路由配置方式,也是 Umi 框架所采用的默认路由配置方式。在约定式路由中,路由配置信息是根据文件夹和文件名自动生成的,开发者只需要按照一定的命名规范来组织文件和文件夹,就可以自动生成对应的路由配置。

5.1、命名规范

在 Umi 中,约定式路由的命名规范如下:

  1. 页面文件命名

页面文件应该以 .js 或 .jsx 为后缀,并放在 src/pages 目录下。例如,src/pages/users.js 表示 users 页面的路由。

  1. 嵌套路由

如果需要定义嵌套路由,可以在页面文件所在的文件夹下创建一个名为 _layout.js 或 _layout.jsx 的文件来定义该文件夹下的路由。例如,你可以在 src/pages/users 目录下创建一个 _layout.js 文件来定义 /users 路由的布局。

  1. 动态路由

如果需要定义动态路由,可以将路由参数用 [] 包裹起来,并将其作为文件夹或文件名的一部分。例如,src/pages/users/[id].js 表示 /users/:id 路由。

  1. 嵌套动态路由

如果需要定义嵌套动态路由,可以在文件夹路径中使用多个动态参数。例如,src/pages/users/[id]/[post].js 表示 /users/:id/:post 路由。

使用约定式路由可以让开发者更加方便地定义应用程序的路由结构,同时也可以减少因手动配置路由而产生的错误。在 Umi 中,你可以通过配置式路由或混合式路由来覆盖默认的约定式路由配置。

5.2、举例说明

假设我们有一个企业级管理系统,其中包含了用户管理、角色管理、权限管理等功能模块。我们可以按照以下方式组织路由结构:

在上述目录结构中,我们按照 Umi 的命名规范,将页面文件放在 src/pages 目录下,并按照功能模块划分为 userrole 和 permission 三个文件夹。在每个文件夹下,我们创建了一个名为 index.js 的文件,表示该功能模块的默认路由,以及一些名为 [id].js 和 [id]/detail.js 的文件,表示该功能模块的动态路由和嵌套路由。

例如,src/pages/user/index.js 表示用户管理模块的默认路由,src/pages/user/[id].js 表示用户管理模块的动态路由,src/pages/user/[id]/detail.js 表示用户管理模块的嵌套路由。

通过这种方式,我们可以根据文件夹和文件名来自动生成路由配置,无需手动配置路由,从而提高开发效率。

需要注意的是,在实际开发中,我们可能还需要在每个页面文件中导出一个 React 组件或者一个函数组件,来实现页面的具体功能。例如,在 src/pages/user/index.js 文件中,我们可能会导出一个名为 UserList 的组件,用于展示用户列表。在 src/pages/user/[id]/detail.js 文件中,我们可能会导出一个名为 UserDetail 的组件,用于展示用户详情。

Umi配置路由的更多相关文章

  1. [SignalR]配置路由

    原文:[SignalR]配置路由 注册路由,在代码如下(SignalR 1.*): 脚本修改如下: 但是其官方文档解释是: By default, the route URL which client ...

  2. angular配置路由/子页面+vue配置路由/子页面

    1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

  3. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  4. flutter 入口文件配置路由+加载页面

    入口文件配置路由 1.路由信息 -- 加载页面 ,通常用于显示新的内容或者广告,加载完成之后进入主页面 -- 主页面 /app 2.配置页面  main.dart main.dart // main ...

  5. Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  6. linux deb系 rpm系 配置路由

    deb: 添加默认路由:route add default gw 8.46.192.1 添加网段路由:route add -net 8.46.0.0/19 gw 8.46.192.1 删除路由:把 a ...

  7. urls.py的配置[路由配置]

    urls.py的配置[路由配置] Get请求与Post请求的方式 get请求: (1)地址栏输入url (2)<a href="请求url">点击</a> ...

  8. Windows两个网卡配置路由规则 同时访问内网和外网

    电脑上有两个网卡,一个有线一个无线,有线连局域网,无线连外网,虽然两个网都连着,但还是会出现访问不通的情况. 这就要求我们自己来配置路由规则,让内网的访问走内网的网卡,外网的访问走外网的网卡. 一.查 ...

  9. centos和ubuntu配置路由的三种方式

    本篇总结三种修改路由的方式:route, ip route, 以及通过修改文件来配置路由,前2种命令行形式适用于ubuntu和centos,重启失效,最后一种永久有效.     一. route命令 ...

  10. tp配置+路由+基本操作

    一.打开apache 的配置文件httpd_conf添加以下代码 <VirtualHost *:80>DocumentRoot "D:\wwwroot\thinkphp\publ ...

随机推荐

  1. HDU - 2897 邂逅明下 (简单博弈)

    题目链接: https://vjudge.net/problem/HDU-2897 题目大意: 就是现在一堆石子有n颗, 每次只能拿走p~q颗, 当剩余少于p颗的时候必须一次拿完 拿走最后一颗的人败 ...

  2. Spring七种事务传播行为与五种事务隔离级别

    一.事务的传播行为:通过Propagation定义: <!-- 配置事务通知 --><tx:advice id="txAdvice" transaction-ma ...

  3. Serverless 时代开启,云计算进入业务创新主战场

    作者 | 于洪涛 "我们希望让用户做得更少而收获更多,通过 Serverless 化,让企业使用云服务像用电一样简单." Serverless 化正在成为全新的软件研发范式,阿里云 ...

  4. eyebeam高级设置

    概述 VOIP测试过程中,经常会用到各种各样的SIP终端,eyebeam是其中最常见的一种. 在eyebeam的配置option中,只有少量的配置选项,有些特殊的设置无法配置. 比如DTMF码的发码形 ...

  5. RL 基础 | 如何搭建自定义 gym 环境

    需实现的方法: __init__(self): 需定义 action_space 和 observation_space,使用 space.Box 之类来表示(from gym import spac ...

  6. zookeeper 特点、使用场景及安装,配置文件解析

    本文为博主原创,未经允许不得转载: 1. Zookeeper 特点: ZooKeeper是用于分布式应用程序的协调服务.它公开了一组简单的API,分布式应用程序可以基于这些API用于同步,节点状态.配 ...

  7. 分享Go书籍-《Go Web编程》

    大家好,我是沙漠尽头的狼. 最近几天在看一本Go的书籍,看了100来页,感觉不错,分享给大家​.​ 书籍基本信息 书籍信息: 书名:Go Web编程 作 者:(新加坡)郑兆雄(Sau Sheong C ...

  8. 【C/C++】输出文件的相对路径

    FILE 在有些编译器上会输出带路径的文件名,删除路径可使用函数 strrchr #include <string.h> #include <stdio.h> #define ...

  9. 让vs自动提示没有using的类

    默认情况下,没有using的类,敲代码时没有智能提示,需要在[工具]->[选项]中开启

  10. [转帖]使用 TiUP 部署 TiDB 集群

    https://docs.pingcap.com/zh/tidb/stable/production-deployment-using-tiup TiUP 是 TiDB 4.0 版本引入的集群运维工具 ...