bread crumbs 1
Thu Aug 17 2023 22:20:25 GMT+0000 (Coordinated Universal Time)
Saved by
@bfpulliam
#react.js
import { ChevronRightIcon } from "@chakra-ui/icons";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react";
import { useNavigate, useLocation } from "react-router-dom";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function BreadcrumbNavigation({ title }: any): JSX.Element {
const navigate = useNavigate();
const { pathname } = useLocation();
const pathnames = pathname.split("/").filter(Boolean);
// check the pathName for numbers, upper and lower case.
//return new path name with spaces, no numbers, and first letter capital
// function UpdatePathName(input: string) {
// console.log(input);
// const result = input.match(/[A-Z]?[a-z]+|\d+|[A-Z]+(?![a-z])/g);
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore: Object is possibly 'null'
// const newPathName = result.slice(0, 1).join(" ");
// return newPathName.charAt(0).toUpperCase() + newPathName.slice(1);
// }
return (
<Breadcrumb
spacing="8px"
separator={<ChevronRightIcon color="gray.500" />}
>
<BreadcrumbItem key={"home"}>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
{pathnames.map((name, index) => {
const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
// const isLast = index === pathnames.length - 1;
// const newPathName = UpdatePathName(name);
return pathnames.length === 1 ? (
<BreadcrumbItem
key={title}
id={title}
isCurrentPage
>
<BreadcrumbLink href="#">{title}</BreadcrumbLink>
</BreadcrumbItem>
) : (
<BreadcrumbItem
key={name}
id={name}
isCurrentPage
>
<BreadcrumbLink onClick={() => navigate(routeTo)}>
{name.replace(/%20/g, " ")}
</BreadcrumbLink>
</BreadcrumbItem>
);
})}
</Breadcrumb>
);
}
content_copyCOPY
Comments