antd pro笔记2——约定式路由

633 阅读1分钟

Umi约定式路由

如果没有 routes 配置,Umi 会进入约定式路由模式,约定式路由即文件系统路由,通过目录和文件及其命名(src/pages)分析出路由配置。

常规约定路由

文件结构:
对应路由配置:

动态路由

约定[]包裹的文件或文件夹为动态路由。
文件结构:

对应路由配置:

动态可选路由

约定[ $]包裹的文件或文件夹为动态可选路由,即可以有该路径字段也可以没有。
文件结构:

对应路由配置:

嵌套路由

Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由,以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件,并通过 props.children 渲染子组件。
文件结构:

对应路由配置:

全局layout

404路由

权限路由

通过指定高阶组件wrappers达成效果。
如下,src/pages/user

然后在 src/wrappers/auth 中,

这样,访问 /user,就通过 useAuth 做权限校验,如果通过,渲染 src/pages/user,否则跳转到 /login,由 src/pages/login 进行渲染。