react+ant design Breadcrumb面包屑组件

最新推荐文章于 2024-07-02 21:30:36 发布

weixin_30894583

最新推荐文章于 2024-07-02 21:30:36 发布

阅读量3.5k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaojiumei/p/10422806.html

版权

import React from 'react';
import { Link }from 'react-router-dom';
import { Breadcrumb  } from 'antd';

//具体导航的名称
const breadcrumbNameMap = {
    '/user':'用户管理',
    '/user/user_info':'用户信息',
    '/user/user_info/user_detail':'用户详情',
    '/user/user_pool':'用户池',
    '/user/user_pool/user_detail':'用户详情',
    '/user/my_user':'我的用户',
    '/user/my_user/user_detail':'用户详情',
}
export default class NewBreadcrumb extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            pathSnippets: null,
            extraBreadcrumbItems: null,
        }
    }
    getPath = () => {
        //对路径进行切分，存放到this.state.pathSnippets中
        this.state.pathSnippets = this.props.pathname.split('/').filter(i => i);
        // let arr=this.state.pathSnippets;
        // let pathname=this.context.router.history.location.pathname;
        //将切分的路径读出来，形成面包屑，存放到this.state.extraBreadcrumbItems
        this.state.extraBreadcrumbItems = this.state.pathSnippets.map((_, index) => {
            let url = `/${this.state.pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>
                        {breadcrumbNameMap[url]}
                    </Link>
                </Breadcrumb.Item>
            );
        });
    }
    componentWillMount() {
        this.getPath();
    }
    render() {
        return <Breadcrumb>{this.state.extraBreadcrumbItems}</Breadcrumb>;
    }
}