umi学习笔记

一、路由

• 静态路由/动态路由

 这是动态路由

静态路由是启动应用的时候把所有路由模块都加载进来

动态路由是当你访问到这个页面，才把对应的组件加载

[]可包文件或文件夹

 

• wrappers 用于配置路由的高阶组件封装

可以用于路由级别的权限校验(路由权限校验/路由守卫)

export default {
  routes: [
    { path: '/user', component: 'user',
      wrappers: [
        '@/wrappers/auth',
      ],
    },
    { path: '/login', component: 'login' },
  ]
}

然后在 src/wrappers/auth 中，

import { Redirect } from 'umi'
export default (props) => {
  const { isLogin } = useAuth();
  if (isLogin) {
    return <div>{ props.children }</div>;
  } else {
    return <Redirect to="/login" />;
  }
}

这样，访问 /user，就通过 useAuth 做权限校验，如果通过，渲染 src/pages/user，否则跳转到 /login，由 src/pages/login 进行渲染。