react+antd面包屑导航

根据以前写vue面包屑写的。 
 import {   
    useLocation,
    matchRoutes,
  } from "react-router-dom";
const location = useLocation();
import router from './router'
 useEffect(() => {
     // router全部路由
       const matched  = matchRoutes(router, location.pathname);
       const n = matched.length;
       let breadcrumb = [];
       if(n > 0) {
        const routes = matched[n - 1].route;
        breadcrumb  = routes.meta || [];
       
        console.log('routes',routes)
       }
 
         console.log('面包屑导航', breadcrumb)
     
         
    },[location.pathname]);

router.js路由文件
import React, { Suspense, lazy } from 'react'
import Layout from '../views/Layout/index'
const Home = lazy(() => import('../views/home/index'))
const List = lazy(() => import('../views/list/index'))
const Test = lazy(() => import('../views/test/index'))
const Detail = lazy(() => import('../views/detail/index'))
const DetailTest = lazy(() => import('../views/detail/test1/index'))
const DetailTest2 = lazy(() => import('../views/detail/test2/index'))
const lazyLoad = (children) => {
    return <Suspense fallback={<div>loading……</div>}>
        {children}
    </Suspense>
}
const router = [
    {
        path: "/",
        element: <Layout />,
        children: [
            {
                index: true,
                element: lazyLoad(<Home />)
            },
            // {
            //     path: 'list/:id',
            //     element: lazyLoad(<List />)
            // },
            {
                path: 'list',
                element: lazyLoad(<List />)
            },
            {
                path: 'detail',
                element: lazyLoad(<Detail />),
              
                children: [
                    {
                        
                        path: 'test1',
                        element: lazyLoad(<DetailTest />),
                        meta: [
                            {
                                title: '详情页'
                            },
                            {
                                title: '详情页列表',
                                path: ''
                            },
                    ]
                    },
                    {
                        path: 'test2',
                        element: lazyLoad(<DetailTest2 />),
                    }
                ]
            },
            // {
            //     path: 'detail/:id',
            //     element: lazyLoad(<Detail />)
            // },
            {
                path: 'test',
                element: lazyLoad(<Test />)
            }
        ]
    }
];

export default router