bread crumbs 2
Thu Aug 17 2023 22:20:37 GMT+0000 (Coordinated Universal Time)
Saved by
@bfpulliam
#react.js
import { ChevronRightIcon } from "@chakra-ui/icons";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
} from "@chakra-ui/react";
import { useNavigate, useLocation } from "react-router-dom";
export default function BreadcrumbNavigation({
title,
}: Record<string, any>): JSX.Element {
const navigate = useNavigate();
const { pathname } = useLocation();
const pathnames = pathname.split("/").filter(Boolean);
const blogName = pathnames[1]?.replace(/%20/g, " ");
// 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" />}
>
{/* home button */}
<BreadcrumbItem key={"home"}>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
if(pathnames.length === 1)
{
<BreadcrumbItem
key={title}
id={title}
isCurrentPage
>
<BreadcrumbLink href="#">{title}</BreadcrumbLink>
</BreadcrumbItem>
}
else
{
<BreadcrumbItem
key={pathnames[1]}
id={pathnames[1]}
isCurrentPage
>
<BreadcrumbSeparator />
<BreadcrumbLink onClick={() => navigate(pathnames[1])}>
{blogName}
</BreadcrumbLink>
</BreadcrumbItem>
}
</Breadcrumb>
);
}
content_copyCOPY
Comments