Umi 约定式路由解析

可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？

1. 什么是路由

路由是根据不同的 URl 地址展示不同的内容或页面、组件。一个针对 React 而设计的路由解决方案、可以友好的帮你解决 React Components 到 URl（路径） 之间的同步映射关系。

2. Umi 约定式路由使用

2.1 首页路由

首页路由页（localhost:8000）为 pages 文件下 index.tsx。

2.2 一级路由

定义在 pages 下的路由文件会自动生成相应的路由。

2.3 重定向

Umi 重定向直接使用 Redirect，localhost8000 -> localhost8000/xxx

/* by 01130.hk - online tools website : 01130.hk/zh/refresh.html */
<Redirect to="/xxxx">

2.4 404 NotFount

直接在 pages 文件下创建一个 404.tsx 路由，匹配没有相关路由就会显示 404 路由。

2.5 嵌套路由

pages 文件夹下新建一个一级路由文件夹 xxx，并在其下新建一个 _layout.tsx 组件，其就是代表了 xxx 组件，然后我们在 xxx 文件夹下新建其他的路由组件，这些称为嵌套路由组件即孩子组件，需要在 xxx 父级组件中给孩子组件留位置（插槽）就可以嵌套显示。

2.6 layouts 根组件

layouts 文件夹，在 src 文件夹下新建 layouts 文件夹，并创建项目根组件 index.tsx 做为整个项目的根组件。可以用来做整个项目的声明式导航。

2.7 [xxx].tsx 动态路由

pages 文件夹下新建一个动态路由文件夹，在其下新建动态路由 [id].tsx。

2.8 路由拦截

在 src 文件夹下新建一个 wrappers 包装器文件夹，新建一个 Auth.tsx 组件，做为其他需要包装组件的父组件进行路由拦截。

2.9 路由模式配置

在 .unirc.ts 文件中进行配置。

/* by 01130.hk - online tools website : 01130.hk/zh/refresh.html */
history:{
   type:"hash" // hash 模式设置，默认 Browser 模式
},

》官方文档：https://v3.umijs.org/zh-CN/docs