『Umi』从配置式路由到实践

一、前言

🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 11 篇，《从配置式路由到实践》

经过上一篇文章《『Umi』约定式路由 - 从安装到实践的完整指南》的介绍，了解了下 Umi 的使用，了解了 Umi 的约定式路由，那么了解完了这些内容之后还没完。

了解完 Umi 的使用与约定式路由之后，上篇文章我在介绍 Umi 的时候，是不是说过 Umi 是由路由为基础的，是不是还说过 Umi 是支持配置式路由与约定式路由，约定式路由上篇文章是不是已经给大家看过了介绍过了，看过之后是不是还有一个配置式路由，所以大家应该知道本篇文章是要给大家介绍 Umi 的配置式路由。

那么接下来就让我们一起来看看 Umi 的配置式路由吧！

二、配置式路由

在 Umi 中如何自己手动的来配置路由呢，直接打开官方网站来看看 Umi 官方文档，自己去百度搜索吧，这里链接贴不出来。搜索 Umi 即可。

然后找到头部的文档：

点击文档进入到文档页面之后，在左侧的导航栏中找到『目录结构』，点击进入到『目录结构』页面：

在『目录结构』页面中告诉我们一个基础的 Umi 项目大致是这样的：

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts

就是包含如上的目录结构，这就是一个基础的 Umi 项目的目录结构。这些内容中的 pages 上一篇文章是不是已经给大家介绍过了，说明我们已经接触过了，.umi 隐藏文件夹上篇文章也介绍过了，这个里面有一个东西，还没有接触过，什么东西呢？就是 .umirc.ts（.js） 这个文件。

2.1 umirc.ts（js）文件

在官方文档中告诉我的是 Umi 的配置文件，我们可以在这个配置文件里面对 Umi 内置的功能和插件进行配置，那可以进行一些什么样的配置呢？

好，目录结构这个页面先暂且不看了，继续在左侧的导航栏中找到『路由』，点击进入到『路由』页面：

在『路由』页面中发现官方告诉我们可以在配置文件中通过 routes 配置项来配置路由，也就是对路由进行手动配置，所以说如何手动的配置的路由呢，通过如上一系列的操作，可以得知，首先需要再项目的根目录下创建一个隐藏的配置文件 .umirc.ts（或者 .umirc.js），的这么一个文件，然后在这个文件当中通过 routes 配置项来配置路由，就可以了。

那么接下来就让我们一起来看看如何手动的配置路由吧！

2.2 配置式路由 - 手动配置路由

找到原先的 Umi 项目，然后在项目的根目录下创建一个 .umirc.ts（js） 文件，然后在这个文件当中配置路由，我这里创建的是以 .js 结尾的文件，然后在这个文件当中配置路由，首先是通过 export default 暴露出去一个配置对象：

export default {
}

在这个暴露出去的配置对象，就可以通过官方提供的方式来进行配置：

export default {
+   routes: [
+       {exact: true, path: '/', component: 'index'},
+       {exact: true, path: '/user', component: 'user'},
+   ],
}

先将官方的内容拷贝一下到这个暴露出去的配置对象中：

更改一下这个配置对象，将这个配置对象中的 routes 配置项改为符合我意向的配置规则，首先是 / 当访问到这个路由的时候，我想让它渲染 home 组件，官方渲染组件为 index：

export default {
    routes: [
        {exact: true, path: '/', component: 'home'},
        {exact: true, path: '/user', component: 'user'},
    ],
}

如果是 /index 的时候，去渲染 about 组件：

export default {
    routes: [
        {exact: true, path: '/', component: 'home'},
        {exact: true, path: '/index', component: 'about'},
    ],
}

如果是 /about 的时候，去渲染 index 组件：

export default {
    routes: [
        {exact: true, path: '/', component: 'home'},
        {exact: true, path: '/index', component: 'about'},
        {exact: true, path: '/about', component: 'index'},
    ],
}

我将这几个组件的路由规则全部打乱了，我故意把顺序弄乱的，如果是通过约定式路由的话：

• / 渲染的是 index.js 组件
• /home 是不是应该渲染的是 home.js 组件
• /about 是不是应该渲染的是 about.js 组件

稍等下，我觉得我打乱之后的内容有一个内容的名称不规范我将其纠正一下，将 index 改为 home，最终的配置如下：

export default {
    routes: [
        {exact: true, path: '/', component: 'home'},
        {exact: true, path: '/home', component: 'about'},
        {exact: true, path: '/about', component: 'index'},
    ],
}

接下来就是运行起来看一下行不行，如果行！是不是意味着就没问题了，回到终端当中 npx umi dev 运行项目：

注意点：一定要重启项目，不然配置不会生效！.umirc.ts（js）这个文件是一个配置文件 umi rc，rc 是什么，是 run config。

然后访问 http://localhost:8000/：

渲染的是 home 组件，这个没有问题，为什么是 home？是不是因为我已经明确的告诉 Umi 当访问 / 的时候渲染的是 home 组件，那么接下来访问 /home，看看是不是渲染的是 about 组件，访问 http://localhost:8000/home：

渲染的是 about 组件，这个也没有问题，为什么是 about？是不是因为我已经明确的告诉 Umi 当访问 /home 的时候渲染的是 about 组件，那么接下来访问 /about，看看是不是渲染的是 index 组件，访问 http://localhost:8000/about：

渲染的是 index 组件，这个也没有问题，为什么是 index？是不是因为我已经明确的告诉 Umi 当访问 /about 的时候渲染的是 index 组件，那么这个配置式路由就配置成功了。

这个时候约定式路由是不是就失效了。这里有个注意点：

如果通过 .umirc.ts（js） 文件手动的配置了路由，那么默认的约定式路由就会失效，那么最终的路由效果就是我们自己配置的路由（效果）。

三、总结

本文详细介绍了 Umi 中配置式路由的使用方法，主要包含以下几个要点：

1. 配置式路由需要在项目根目录创建 .umirc.ts 或 .umirc.js 配置文件
2. 通过 routes 配置项可以手动定义路由规则
3. 路由配置包含 path、component 等属性，可以灵活配置路由与组件的对应关系
4. 启用配置式路由后，约定式路由会自动失效
5. 修改配置文件后需要重启项目才能生效

掌握配置式路由的使用，让我们能更灵活地控制页面路由，实现更复杂的路由需求。这种方式虽然比约定式路由要写更多的配置代码，但是带来了更大的灵活性和可控性。

🐤如果您觉得本文对您有所帮助，欢迎点赞、收藏或分享，您的支持是我创作的最大动力！

感谢阅读