Ant Design Pro(5)-2.路由的使用

Ant Design Pro中路由的使用

一. 介绍

在 Umi 应用是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

1. 路由样例

export default [
{
    path: '/application',
    name: 'application',
    icon: 'codepen',
    routes: [
      {
        path: '/application',
        redirect: '/application/applicate-***',
      },
      {
        path: '/application/applicate-list',
        name: 'applicate-list',
        icon: '',
        component: './Application/ApplicateList',
      },
      .........
    ],
  },
]

2. 路由属性

1. path

path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。

以下是目前支持的路由路径配置形式：

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

2. component

配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从src/pages 开始找起。

如果指向 src 目录的文件，可以用 @，也可以用 …/。比如 component:‘@/layouts/basic’，或者 component: ‘…/layouts/basic’，推荐用前者。

3. routes

配置子路由，通常在需要为多个路径增加 layout 组件时使用。

4. redirect

配置路由跳转。

5. wrappers

配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验

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

然后在 src/wrappers/auth 中，

import { Navigate, Outlet } from 'umi'
 
export default (props) => {
  const { isLogin } = useAuth();
  if (isLogin) {
    return <Outlet />;
  } else{
    return <Navigate to="/login" />;
  }
}

这样，访问 /user，就通过 auth 组件做权限校验，如果通过，渲染 src/pages/user，否则跳转到 /login

参考文档：umi路由

二. 使用

1.引入路由

首先需要在config文件夹下的config.ts中引入路由配置

2.创建组件

在pages文件夹下创建自定义组件（Order），在Order下创建index,tsx这里的组件我们暂且可以理解为页面；

index.tsx

export default () => (
 <div>
    这里是路由体跳转测试页面
 </div>
);

3.配置路由

在config文件下的routes.中配置路由

为了方便直观的看到效果，我们可以在app.tsx中修改登陆页面的路径

启动项目我们就可以看到在侧边栏中看到我们添加的页面了