view.js

import React, { useEffect, useState } from 'react'
import { Breadcrumb } from 'antd'
import basisRoute from '../../router/models/basisRoute'


function getRouteChain(routes = [], activeName) {
    let result = []

    routes.forEach(e => {
        if (e.url === activeName) {
            result.push({ name: e.name, url: e.url })
            return
        }

        if (e.childMenus && e.childMenus.length > 0) {
            const childRoutersult = getRouteChain(e.childMenus, activeName)
            if (childRoutersult.length > 0) {
                result.push({ name: e.name, url: e.url })
                result = result.concat(childRoutersult)
            }
        }
    })
    return result
}

const getMenuName = (menu, route) => {
    const data = { url: '/', name: '首页', disable: true }

    menu.forEach(menus => {
        if (menus.childMenus) {
            menus.childMenus.forEach(e => {
                if (e.url === route.path || (route.parentName && route.parentName.includes(menus.url)))
                    data.name = menus.name
                data.url = menus.url
            })
        }
    })

    return data
}


function Breadcrumbs({ openRoute, userRoute, match }) {
    const [routes, setRoutes] = useState([])

    useEffect(() => {
        let route = getRouteChain(userRoute, match.path)
        if (route.length === 0) route = getRouteChain(basisRoute, match.path)

        if (route.length === 0) {
            const isActiveRoute = openRoute.find(e => e.url === match.path) || { name: match.path, url: match.path, parentName: [] }
            route = getRouteChain(userRoute, isActiveRoute.parentName ? isActiveRoute.parentName[0] : '')
            route.push(isActiveRoute)
        }

        const menuName = getMenuName(userRoute, route[0])
        route.unshift(menuName)
        setRoutes(route)

    }, [openRoute, userRoute, match])


    return (
        <div className="breadcrumb-box">
            <Breadcrumb separator=">" >
                {routes.map(e => (e.disable ? <Breadcrumb.Item key={e.name}>{e.name}</Breadcrumb.Item> : <Breadcrumb.Item href={e.url} key={e.name}>{e.name}</Breadcrumb.Item>))}
            </Breadcrumb>
        </div>
    )
}

export default Breadcrumbs