@rrmc/antd-breadcrumbs

Automatically generate breadcrumb components based on antd component library and reat-router-manage

install

yarn add @rrmc/antd-breadcrumbs

or

npm i @rrmc/antd-breadcrumbs

DEMO

@rrmc/antd-breadcrumbs

Props

name	describe	type	default
text	You may need to customize the name of bread crumbs, which will override thebreadcrumbs.text	string	undefined
separator	props.separator in thebreadcrumbs component of antd	string	undefined

如何使用

假如一个路由的配置文件是这样的

import { useMemo } from "react";
import { MRouter, defineRouterConfig, useRouter } from "react-router-manage";
import Breadcrumbs from "@rrmc/antd-breadcrumbs";
import { Menu, Layout } from "antd";

import "./styles.css";

const { Sider, Content } = Layout;

function A() {
  return "A";
}
function ADetail() {
  return "ADetail";
}

function B() {
  return "B";
}
function BDetail() {
  return "BDetail";
}

function Edit() {
  return "edit";
}

function getItems(routes) {
  return routes.map((i) => {
    const item: any = {
      key: i.name,
      label: i.title
    };
    if (i.items?.length) {
      item.children = getItems(i.items);
    }
    return item;
  });
}

function RouterLayout({ children }) {
  const { routes, routesMap, navigate } = useRouter();

  const items = useMemo(() => {
    return getItems(routes);
  }, [routes]);
  return (
    <Layout style={{ height: "100%" }}>
      <Sider trigger={null} collapsed={false}>
        <Menu
          mode="inline"
          theme="dark"
          items={items}
          onSelect={({ key }) => {
            console.log(key);
            navigate(routesMap[key]?.path);
          }}
        ></Menu>
      </Sider>
      <Content style={{ padding: 20 }}>
        <div style={{marginBottom: 10}}>
          <Breadcrumbs />
        </div>

        <div>{children}</div>
      </Content>
    </Layout>
  );
}

const routerConfig = defineRouterConfig({
  routes: [
    {
      title: "GroupA",
      name: "groupA",
      path: "group-a",
      items: [
        {
          title: "Alist",
          name: "Alist",
          path: "list",
          component: A,
          items: [
            {
              title: "Edit",
              name: "AEdit",
              path: "edit",
              component: Edit
            }
          ]
        },
        {
          title: "ADetail",
          name: "aDetail",
          path: "detail",
          component: ADetail
        }
      ]
    },
    {
      title: "GroupB",
      name: "groupB",
      path: "group-b",
      items: [
        {
          title: "Blist",
          name: "Blist",
          path: "list",
          component: B
        },
        {
          title: "BDetail",
          name: "bDetail",
          path: "detail",
          component: BDetail
        }
      ]
    }
  ]
});

export default function App() {
  return <MRouter routerConfig={routerConfig} wrapComponent={RouterLayout} />;
}