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 进行渲染。