43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
|
|
import {
|
|
Link
|
|
} from 'react-router-dom';
|
|
|
|
const BreadcrumbHistory = ({ url }) => {
|
|
const renderBreadCrumbs = () => {
|
|
const route = url.split('/')
|
|
.slice(1)
|
|
.map((routeSegment) => routeSegment
|
|
.split('-')
|
|
.map((word) => word[0].toUpperCase() + word.slice(1))
|
|
.join(' '));
|
|
const length = route.length;
|
|
|
|
return route.map((item, index) => {
|
|
const middlewareUrl = `/${url.split('/').slice(1, index + 2).join('/')}`;
|
|
return (
|
|
<BreadcrumbItem key={middlewareUrl}>
|
|
{length === index + 1 ?
|
|
item :
|
|
<Link to={middlewareUrl}>
|
|
{item}
|
|
</Link>
|
|
}
|
|
</BreadcrumbItem>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Breadcrumb tag="nav" listTag="div">
|
|
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
|
|
{renderBreadCrumbs()}
|
|
</Breadcrumb>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BreadcrumbHistory;
|