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

点此可以查看原作者

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值