在src下创建app.tsx文件

1.patchRoutes({routes})

  1. export function patchRoutes({ routes }:any) {
  2.     console.log(routes);
  4.     routes.unshift({   
  5.       path: '/foo',
  6.       exact: true,
  7.       component: require('@/pages/login').default,
  8.     })
  10.     console.log('更新添加后的路由',routes);
  11.     }

image.png 2.根据服务器端动态生成路由

  1. //定义额外路由变量
  2. let extraRoutes:any[]
  3. export function patchRoutes({ routes }:any) {
  4.    //合并服务端返回路由
  5.     extraRoutes.map(item=>{
  6.         routes.unshift({
  7.             path: item.path,
  8.             component: require(`@/pages${item.component}`).default, 
  9.         })
  10.     })
  11.     }
  13. //覆写render,会在patchRoutes之前执行
  14. export function render(oldRender:any) {
  15.     // fetch('/api/routes').then(res=>res.json()).then((res) => { 
  16.     //     extraRoutes = res.routes;
  17.     //   })
  18.     //模拟从服务端请求的获得的路由
  19.     extraRoutes=[
  20.         {path:'/serve',component:'/serve'}
  21.     ]
  23.   oldRender();
  24. }

3.render(oldRender: Function)

覆写 render。 比如用于渲染之前做权限校验，

  1. import {history} from 'umi'
  2. //定义额外路由变量
  3. let extraRoutes:any[]
  4. export function patchRoutes({ routes }:any) {
  5.    //合并服务端返回路由
  6.     extraRoutes.map(item=>{
  7.         routes.unshift({
  8.             path: item.path,
  9.             component: require(`@/pages${item.component}`).default, 
  10.         })
  11.     })
  12.     }
  14. //覆写render,会在patchRoutes之前执行
  15. export function render(oldRender:any) {
  16.     // fetch('/api/routes').then(res=>res.json()).then((res) => { 
  17.     //     extraRoutes = res.routes;
  18.     //   })
  19.     //模拟从服务端请求的获得的路由
  20.     extraRoutes=[
  21.         {path:'/serve',component:'/serve'}
  22.     ]
  24.     //在渲染之前做一些校验,登录权限判断
  25.     const isLogin=true
  26.     if(isLogin){
  27.         history.push('/login')
  28.     }
  29.   oldRender();
  30. }

4.onRouteChange({routes, matchedRoutes, location, action})

  1. //做埋点统计
  2. // export function onRouteChange({ location, routes, action }:any) {
  3. //    console.log(location);
  4. //    console.log(routes);
  5. //    console.log(action);
  6. //   }
  8. //设置标题
  9.   export function onRouteChange({ matchedRoutes }:any):void {
  10.       console.log(matchedRoutes[matchedRoutes.length - 1].route);
  12.     if (matchedRoutes.length) {
  13.       document.title = matchedRoutes[matchedRoutes.length - 1].route.path || '';
  14.     }
  15.   }