Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 25x 25x 25x 63x 59x 59x 86x 59x 25x 59x | import { Link, matchRoutes, useLocation } from "react-router-dom";
import { Fragment } from "react/jsx-runtime";
import routes from "./routes";
function Breadcrumbs(): React.JSX.Element {
const { pathname } = useLocation();
const match = matchRoutes(routes, pathname) ?? [];
const segments = match
.filter(({ route }) => route.label)
.map(({ params, pathname, route }) => {
let label = route.label ?? "";
Object.entries(params).forEach(([key, value]) => {
label = label.replaceAll(`:${key}`, value ?? "");
});
return { label, to: pathname };
});
return (
<>
<h1 className="p-heading--4" aria-live="polite">
<Link to="/snaps">My snaps</Link> /
{segments?.map(({ label, to }, i) => (
<Fragment key={i}>
{i + 1 < segments?.length ? (
<>
<a href={to}>{label}</a> /
</>
) : (
label
)}
</Fragment>
))}
</h1>
{/* TODO: this is the proper accessible implementation of the breadcrumbs pattern,
we should change the layout to use this rather than the h1 above */}
{/* <nav className="p-breadcrumbs" aria-label="Breadcrumb" aria-live="polite">
<ol className="p-breadcrumbs__items">
<li className="p-breadcrumbs__item">
<Link to="/snaps">My snaps</Link>
</li>
{segments?.map(({ label, to }, i) => (
<li className="p-breadcrumbs__item" key={i}>
{i + 1 < segments?.length ? (
<Link to={to}>{label}</Link>
) : (
<span aria-current="page">{label}</span>
)}
</li>
))}
</ol>
</nav> */}
</>
);
}
export default Breadcrumbs;
|