antd pro笔记3——配置路由Umi通过routes进行配置，格式为路由信息的数组。相对路径，会从src/page

Umi通过routes进行配置，格式为路由信息的数组。

export default {
  routes: [
    { exact: true, path: '/', component: 'index' },
    { exact: true, path: '/user', component: 'user' },
  ],
}

path

component

相对路径，会从src/pages开始找起；如果指向src目录的文件，可以用@。比如@/layouts/basic，或者../layouts/basic。

exact

严格匹配

routes

子路由，通常需要为多个路径增加layout组件时使用。通过layout组件的props.children渲染子组件。

redirect

配置路由跳转。

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" />;
  }
}

title

history

Link组件

Link 只用于单页应用的内部跳转，如果是外部地址跳转请使用 a 标签.

antd pro笔记3——配置路由