umi面包屑和頁頭配置和使用

在使用umi架構的時候,本來我們的頁面是隻能寫在如圖所示位置的内層紅框中

通過審查元素可得,是由于架構自帶的一個樣式有margin導緻了我們的内容正常情況是無法布局到外面去的(因為一般我們不會改架構自己寫好的樣式)

那麼如果我們想要實作像這樣的面包屑和頁頭要怎麼辦呢

umi自己封裝了一個元件

PageHeaderWrapper

,使用起來也非常簡單

import React from 'react';

import styles from './index.css';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default function () {
  return (
    <PageHeaderWrapper title="任務稽核">
      <div className={styles.normal}>
        <h1> 任務稽核Page index</h1>
      </div>
    </PageHeaderWrapper>
  );
}
           

其中: title是頁頭的标題,就是截圖的加粗的歡迎,其他參數請看下面截圖

出現面包屑的條件:

1. 首先在路由的配置中要加上

   name

   屬性
2. 這樣的話預設是會在左邊的導航欄中出現導航名
3. 如果你不想在左邊出現的話在路由配置中要需要加一個屬性

   hideInMenu

   ,值為true
4. 像一級路由的話面包屑就是

   首頁/一級頁面

   的形式

{
  path: '/welcome',
  name: 'welcome',
  icon: 'smile',
  component: './Welcome', // Routes: ['./routes/PriviteRoute.js'],
},
           

1. 如果是二級路由則是

   首頁/一級頁面/二級頁面

   的形式

{
  path: '/individual/main',
  name: 'individual',
  icon: 'crown',
  routes: [
    {
      path: '/individual/license/index',
      name: 'license',
      component: './individual/license',
    },
    {
      path: '/individual/seal/index',
      name: 'seal',
      component: './individual/seal',
    },
  ],
},
           

1. 這裡又會發現一個問題,就是如果是二級路由的話第二個面包屑是不可點選的,而且每次最前面都是首頁,如果讨厭這樣的配置的話請往下看
2. 定位到

   src/layouts/BasicLayout.tsx

   這個檔案可看到一個屬性(位置請看截圖行數)

   

   這裡就是面包屑的渲染的配置,我們可列印routers(首頁/任務管理/任務稽核)

   

   比如說我們将前面的首頁部分的面包屑删除,直接傳回

   ...routers

   ,你就會發現3層面包屑變成了兩層,

   首頁/任務管理/任務稽核

   =>

   任務管理/任務稽核

   ,而且任務管理變成了可點選的,但是由于我這裡任務管理不是一個有render的元件,是以無法進行跳轉和渲染,如果想對面包屑做其它的配置可自己DIY.

使用routes屬性自定義面包屑層級顯示

想要實作不是它自帶首頁的面包屑

1. 在路由配置檔案中定義好帶層級的

   path

   (一定要注意層級)

   {
      path: '/task-center',
      name: 'task-center',
      icon: 'unordered-list',
      component: './task-center/index',
      Routes: ['./routes/PrivateRouteRegister.js'],
    },
    {
      path: '/task-center/task-details',
      component: './taskDetails/taskDetails',
    },
              

2. 使用

   PageHeaderWrapper

   元件的

   routes

   屬性

   import React from "react";
   
   import { PageHeaderWrapper } from "@ant-design/pro-layout";
   
   export default function () {
     const routes = [
       {
         path: '/task-center',
         breadcrumbName: '任務中心',
       },
       {
         path: '/task-details',
         breadcrumbName: '任務詳情',
       },
       {
         path:'/current',
         breadcrumbName: '目前頁面'
       }
     ];
     return (
       <PageHeaderWrapper
         title="測試頁面"
         breadcrumb={{ routes }}
       >
         hello world
       </PageHeaderWrapper>
     );
   }
              

   注意: routes的配置中的path的路徑是單層的,但是在url中它是疊加顯示的