umijs----路由(修改路由的某一个path )

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

点此可以查看原作者

你可能感兴趣的:(javascript,前端,react.js)