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

1. [/code][size=4]2.4 404 NotFount[/size]
3. 直接在 pages 文件下创建一个 404.tsx 路由，匹配没有相关路由就会显示 404 路由。
4. [size=4]2.5 嵌套路由[/size]
6. pages 文件夹下新建一个一级路由文件夹 xxx，并在其下新建一个 _layout.tsx 组件，其就是代表了 xxx 组件，然后我们在 xxx 文件夹下新建其他的路由组件，这些称为嵌套路由组件即孩子组件，需要在 xxx 父级组件中给孩子组件留位置（插槽）就可以嵌套显示。
7. [size=4]2.6 layouts 根组件[/size]
9. layouts 文件夹，在 src 文件夹下新建 layouts 文件夹，并创建项目根组件 index.tsx 做为整个项目的根组件。可以用来做整个项目的声明式导航。
10. [size=4]2.7 [xxx].tsx 动态路由[/size]
12. pages 文件夹下新建一个动态路由文件夹，在其下新建动态路由 [id].tsx。
13. [size=4]2.8 路由拦截[/size]
15. 在 src 文件夹下新建一个  wrappers 包装器文件夹，新建一个 Auth.tsx 组件，做为其他需要包装组件的父组件进行路由拦截。
16. [size=4]2.9 路由模式配置[/size]
18. 在 .unirc.ts 文件中进行配置。
19. [code]history:{
20.    type:"hash" // hash 模式设置，默认 Browser 模式
21. },

复制代码

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

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除