持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
前端开发中的“路由”可以说是每个开发框架中都必须掌握的一个点，但是对于这个教程来说，我们更加注重的实战阶段，我的目的就是希望这个教程能够与现有的官方文档进行“梦幻联动”，官方文档负责讲述清楚每一个概念和设计思路，而这个教程负责将这些概念串联到一起，任何一个看完本教程的朋友，但凡还有一个人不明白官网的这些概念在项目开发中如何使用，或者什么时候被用上的，那就算是这个教程的失败了。
首先我们需要知道的是，在 Umi@4 中路由方案使用的是 React Route 6，如果你有 React Route 6 的使用经验，那你对于 Umi@4 中的路由相关 API 已经得心应手了。如果你重来没用过 React Route 6，也没有关系，接下来的课程我们就会讲清楚 Umi 的页面、如何在页面之间跳转及项目开发中常用到的几种页面之间传参方式。
编辑页面
上一节课，当我们启动了 umi dev 然后访问 http://127.0.0.1:8000 就可以访问到写有 Index Page 的页面。
http://127.0.0.1:8000 是啥？
这里补一点前端基础知识，浏览器解析 url 都是通过 协议（http）、IP（127.0.0.1）、端口号（8000）、路由（/）的方式找到最终我们需要访问的文件。
浏览器还有一个默认行为，当我们没有指定最终文件时，它会去默认加载这个路径下面的 index.htm。
因为我们是一个单页应用，所以在默认情况下，我们的所有路由的入口都是从同一个 html 进入的，这里和浏览器默认行为类似，当我们没有写路由时，它会默认去加载根路由 / 。
先让我们尝试编辑一下上节课的页面，首先确保 umi 开发服务处在运行状态，浏览器能正常访问 http://127.0.0.1:8000
umi dev
cd boilerplate
pnpm start
然后打开 boilerplate/src/pages/index.js，在 <div> 标签下找到 “Index Page” 文字并把它修改为 “Hello Work” ，保存文件。此时你应该可以立马看到浏览器中已经自动将旧文本替换成新文本了。
Umi 开发服务器具有热加载功能，当我们对文件进行修改时，Umi 会自动在浏览器中应用这些修改。无需刷新页面。这在开发中能够节省我们非常多的时间。
Umi 中的页面
在 Umi 中，页面是一个从 pages 目录中的文件导出的 React 组件。
Umi 默认使用约定式路由来匹配文件。（约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。）
Umi 约定式路由
这个概念官网中讲解的很清晰了，理解难度也很低，这里就不展开讲解了，简单的说，就是 pages 目录下，文件及路由。Umi 会自动检索 pages 下面的文件，自动生成一个路由结构，使用 React Route 渲染。
页面与基于文件名的路由对应，例如，在开发中:
pages/index.js对应路由/。pages/user.js对应路由/user。
我们已经有了 pages/index.js 文件，那么让我们创建 pages/user.js，看看它是如何运行的。
新建 user 页面
新建 boilerplate/src/pages/user.js 文件
export default function User() {
return <div>User Page</div>;
}
组件可以有任意名称，但必须将其导出为 default 。
访问 http://127.0.0.1:8000/user。
这里我们访问了路由
/user而不再是最开始的可缺省路由/
你将在浏览器中看到文本 User Page。
这就是在 Umi 中创建不同页面的方法。
只需在 'pages' 目录下的任意目录下创建文件，该文件的路径就成为 URL 路径。
还是要重复一遍，约定式路由是我最喜欢的 Umi 概念，因为它极大的提升了开发者体验，符合常理，所见即所得。快乐如此简单。
感谢阅读，上一个系列的文章，是采用想到哪做到哪的方式展开的，完结之后，我个人觉得整体上会有一些混乱的，因为目标仅仅是强制我自己养成日更的习惯而已。这个系列的文章，采用先规划大纲，细节边调整边输出的方式，所以我很期待你能够在评论区和我互动，让这个系列的文章更加符合你的个人口味。
