You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
973 B
36 lines
973 B
3 years ago
|
import React from "react";
|
||
|
import { Breadcrumb } from "antd";
|
||
|
import { useLocation, Link } from "react-router-dom";
|
||
|
|
||
|
export default function Breadcrumbs() {
|
||
|
const location = useLocation();
|
||
|
const breadcrumbNameMap = {
|
||
|
"/": "Home",
|
||
|
"/clients": "Clients",
|
||
|
"/clients/new": "New",
|
||
|
"/clients/*": "Detail",
|
||
|
"/projects": "Projects",
|
||
|
};
|
||
|
|
||
|
const pathSnippets = location.pathname.split("/").filter((i) => i);
|
||
|
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||
|
const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
|
||
|
return (
|
||
|
<Breadcrumb.Item key={url}>
|
||
|
<Link to={url}>{breadcrumbNameMap[url]}</Link>
|
||
|
</Breadcrumb.Item>
|
||
|
);
|
||
|
});
|
||
|
const breadcrumbItems = [
|
||
|
<Breadcrumb.Item key="home">
|
||
|
<Link to="/">Home</Link>
|
||
|
</Breadcrumb.Item>,
|
||
|
].concat(extraBreadcrumbItems);
|
||
|
|
||
|
return (
|
||
|
<Breadcrumb style={{ marginLeft: "16px", marginTop: "24px" }}>
|
||
|
{breadcrumbItems}
|
||
|
</Breadcrumb>
|
||
|
);
|
||
|
}
|