1、在src下创建app.js/ts/tsx
2、修改路由
export function patchRoutes({routes}){
routes为.umirc.ts中设置的routes数组,可以使用数组的方法插入删除
运行时在最前面插入一个路由
routes.unshift({
path:'/foo',
exact:true,
component:require('/路由路径').default
路由组件必须是能打包的文件夹内,即src里
})
}
3、渲染之前做权限校验、登录状态、项目运行初始配置,早于patchRoutes运行
export function render(oldRender){
(1)!!!会覆盖覆写render,即操作完成后必须调用oldRender()来渲染页面
(2)可配合history等做路由跳转
(3)一般配合patchRoutes一起使用,在这里对路由修改,在patchRoutes进行实际操作
如:
在render中设置路由
let authRoutes=[]; 全局变量
authRoutes.push({path:'x',component:'xx'})
oldRender();
在patchRoutes中实际修改:
authRoutes.forEach((item)=>{
routes.push({ 添加路由
path:item.path,
component:require(item.component).default
})
})
}
4、在初始加载和路由切换时
export function onRouteChange({ routes,matchedRoutes,location, action }) {
console.log(routes); 路由集合
console.log(matchedRoutes); 当前匹配的路由及其子路由
console.log(location); location及其参数
console.log(action); 当前跳转执行的操作
}
5、修改交给 react-dom 渲染时的根组件。
比如用于在外面包一个 Provider,
export function rootContainer(LastRootContainer, args) {
return React.createElement(ThemeProvider, null, LastRootContainer);
}
args 包含:
routes,全量路由配置
plugin,运行时插件机制
history,history 实例