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

react 复制代码
<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 文件中进行配置。

react 复制代码
history:{
   type:"hash" // hash 模式设置,默认 Browser 模式
},

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