umi 运行时配置

Bertha 。 2021-07-24 22:13 1208阅读 0赞

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 实例