Нужно сделать крошки как на скрине, и все бы ничего, но мы ведь не можем вытащить из useLocation ФИО сотрудника, ума не приложу, как это сделать адекватно (не абы как).
Возможно, можно передать в эти крошки ФИО сотрудника как пропс, но тогда крошки нарушат свою инкапсулированность, на мой взгляд, ведь придется их как-то передавать вовнутрь, значит туда сюда поднимать состояния.
Я уже накидал некую черновую логику, но мне кажется, я двигаюсь не в том направлении.
import { Link, useLocation } from 'react-router-dom';
import styles from './BreadCrumbs.module.css';
const BreadCrumbs = () => {
const location = useLocation();
let currentLink = '';
const crumbs = location.pathname
.split('/')
.filter((crumb) => crumb !== '')
.map((crumb) => {
currentLink += `/${crumb}`;
console.log(currentLink);
console.log(1);
return (
<div>
<Link className={styles['crumb']} to={currentLink}>
{crumb}
</Link>
</div>
);
});
return (
<>
<nav>
<div className={styles['crumbs-container']}>
<div>
<Link className={styles['crumb']} to="/employees">
Главная
</Link>
</div>
{crumbs}
</div>
</nav>
</>
);
};
export default BreadCrumbs;
Простой
