Ant Design Pro v5 之 面包屑封装、使用

面包屑封装

// 在src/component 新建Nav文件夹和index.js

import React from "react";
import { Link, withRouter } from "react-router-dom";
import { Breadcrumb } from "antd";

const routerList = {//跟路由路径保持一致
    "/": "首页",
    "/403": "403",
    "/404": "404",
    "/index": "首页",
    "/casualLaborer": "人才储备",
    "/casualLaborerList": "临时工列表",
    "/task": "任务中心",
    "/taskList": "任务列表",
    "/userList": "人员管理",
    "/reportForm": "数据中心",
    "/datamaintenance": "数据维护",
    "/workshop": "车间列表",
    "/occupation": "工种列表",
    "/worktime": "工时列表",

};

const Nav = withRouter((props) => {
    const { location } = props;

    return (
        <div className="title">
            <Breadcrumb style={{ margin: "16px 0" }}>
                {
                    location.pathname.split("/").map((v,i)=>{
                        const data=routerList[`/${v}`]
                        return(
                            <Breadcrumb.Item key={i} ><Link to="/">{data}</Link></Breadcrumb.Item>
                        )
                    
                    })
                }

            </Breadcrumb>
        </div>
    );
});
export default Nav;

使用

import React from "react";
import Nav from "../../components/Nav"; //面包屑导航组件

const Index:React.FC<{}>=()=>{

    return (
        <div>
            <Nav /> 
            首页
        </div>
    )
}


export default Index;