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.
35 lines
973 B
35 lines
973 B
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> |
|
); |
|
}
|
|
|