🎉🎉🎉一文全面了解：react-antd-admin 如何实现面包屑

data: [
            {
                key: 'dashboard',
                path: '/dashboard',
                component: '/dashboard',
                meta: {
                    title: '仪表盘',
                    icon: 'DashboardTwoTone',

                },
            },
            {
                key: 'users',
                path: '/users',
                component: 'layout',
                meta: {
                    title: '用户管理',
                    icon: 'UserOutlined',
                },
                children: [
                    {
                        key: 'list',
                        path: '/users/list',
                        component: '/users/list',
                        meta: {
                            title: '用户列表',
                            icon: 'OrderedListOutlined'
                        },
                    },
                    {
                        key: 'add',
                        path: '/users/add',
                        component: '/users/list',
                        meta: {
                            title: '添加用户',
                            icon: 'UserAddOutlined'
                        }
                    },
                ],
            },
            {
                key: 'company',
                path: '/company',
                component: 'layout',
                meta: {
                    title: '公司管理',
                    icon: 'UserOutlined',
                },
                children: [
                    {
                        key: 'sales',
                        path: '/company/sales',
                        component: 'layout',
                        meta: {
                            title: '销售公司',
                            icon: 'OrderedListOutlined'
                        },
                        children: [
                            {
                                key: 'salesList',
                                path: '/company/sales/list',
                                component: '/company/sales/list',
                                meta: {
                                    title: '销售列表',
                                    icon: 'OrderedListOutlined'
                                }
                            },
                            {
                                key: 'salesAdd',
                                path: '/company/sales/add',
                                component: '/company/sales/add',
                                meta: {
                                    title: '添加销售',
                                    icon: 'UserAddOutlined'
                                },
                            },
                        ]
                    },
                ],
            }
        ]

要实现基于给定数据结构的面包屑导航，你可以递归遍历路由数据并生成相应的面包屑。你可以创建一个Breadcrumbs组件来处理这个逻辑。以下是一个示例实现：

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

const generateBreadcrumbs = (data, pathnames, breadcrumbs) => {
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    if (item.path === pathnames[0]) {
      pathnames.shift();
      breadcrumbs.push(item);
      if (item.children) {
        generateBreadcrumbs(item.children, pathnames, breadcrumbs);
      }
      break;
    }
  }
};

const CustomBreadcrumb = ({ data }) => {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter((x) => x);
  const breadcrumbs = [];

  generateBreadcrumbs(data, pathnames, breadcrumbs);

  return (
    <Breadcrumb>
      {breadcrumbs.map((item, index) => (
        <Breadcrumb.Item key={index}>
          {index === breadcrumbs.length - 1 ? (
            item.meta.title
          ) : (
            <Link to={item.path}>{item.meta.title}</Link>
          )}
        </Breadcrumb.Item>
      ))}
    </Breadcrumb>
  );
};

export default CustomBreadcrumb;

你可以在应用中使用这个CustomBreadcrumb组件，并将你的路由数据传递给它：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import CustomBreadcrumb from './CustomBreadcrumb';

const data = [
  // 路由数据结构（你提供的数据）
];

const Home = () => <div>Home</div>;
// 定义其他页面组件

const App = () => {
  return (
    <Router>
      <CustomBreadcrumb data={data} />
      <Switch>
        <Route path="/" exact component={Home} />
        {/* 添加其他路由 */}
      </Switch>
    </Router>
  );
};

export default App;

现在，CustomBreadcrumb组件会根据当前路由路径和提供的路由数据生成面包屑导航，递归处理子路由。这个示例假设你的路由数据结构是嵌套的，并且可以处理多层深度的面包屑导航。

github.com/KenNaNa/rea…