Хлебные крошки важны при разработке веб-страниц, поскольку они предоставляют пользователям возможность отслеживать их текущее местоположение на нашей веб-странице, а также помогают в навигации по нашей веб-странице.

В этом руководстве мы будем реализовывать хлебные крошки в React с использованием React-router v6 и Bootstrap.

React-router v6 — это библиотека маршрутизации, используемая в React и React Native для навигации по веб-странице или веб-приложению.

Наша реализация использует Typescript, но ее также можно легко использовать для проекта на основе Javascript.

Настройка

Во-первых, давайте установим в нашем проекте act-router-dom, если он еще не установлен:

npm установить реакцию-маршрутизатор-dom

Или альтернатива: использование пряжи:

пряжа добавить реакцию-маршрутизатор-dom

Давайте также установим загрузчик для стилизации нашего компонента:

установка начальной загрузки npm

Реализация нашего компонента

Затем мы создаем компонент Breadcrumbs.tsx, который будет содержать разметку для хлебных крошек, а также включать необходимую логику для определения текущего местоположения относительно корневого местоположения.

Давайте начнем с добавления простой разметки для компонента:

В настоящее время компонент имеет только кнопку «Назад». Давайте добавим простую реализацию кнопки «Назад», чтобы при нажатии на нее загружалась предыдущая страница:

  const goBack = () => {
    window.history.back();
  };

Следующим шагом будет написание функции, которая будет использовать функцию matchRoutes для получения текущего маршрута и применять преобразования для фильтрации всех маршрутов, связанных с текущим маршрутом.
MatchRoute принимает массив объектов типа AgnosticRouteObject и возвращает AgnosticRouteMatch[] | null, где T — тип передаваемого объекта.
Также важно отметить, что объект должен содержать свойство с именем path.

Давайте сначала объявим интерфейс для нашего маршрута:

export interface IRoute {
  name: string;
  path: string; //Important
}

Давайте объявим наши маршруты:

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

Мы также объявляем переменную для хранения хука useLocation, а также другую для хранения наших хлебных крошек в состоянии:

const location = useLocation();
const [crumbs, setCrumbs] = useState([]);

Далее реализуем нашу функцию:

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

Здесь мы сначала получаем все маршруты, соответствующие текущему местоположению:
const allRoutes = matchRoutes(маршруты, местоположение);

Затем мы быстро проверяем, возвращается ли вообще какой-либо результат, и берем первый:
const matchedRoute = allRoutes? allRoutes[0] : ноль;

Далее мы отфильтровываем все маршруты, соответствующие текущему маршруту:
маршруты.фильтр((х) => matchedRoute.route.path.includes(x.path))

Затем давайте используем результат для создания нового массива, который проверяет, есть ли у пути параметры, а затем заменяет динамические маршруты значениями параметров:

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

Это гарантирует, что если мы объявим маршрут как /users/:id/edit в маршрутах и ​​идентификатор будет передан как 1, то мы получим /users/1/edit.

Далее давайте вызовем нашу функцию в useEffect, чтобы она запускалась каждый раз при изменении нашего местоположения:

  useEffect(() => {
    getPaths();
  }, [location]);

После этого мы можем использовать крошки в нашей разметке:

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key   1 ? (
    

Здесь отобразите все крошки с их ссылками, кроме последней, в которой отображается только имя.

Теперь у нас есть полный компонент BreadCrumbs.tsx:

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

export interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState([]);

  //   const routes = [{ path: '/members/:id' }];

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    

      
  );
};
export default Breadcrumbs;

Затем мы можем использовать этот компонент в любой части нашего приложения, желательно в макете.

Заключение

Мы увидели, как реализовать простой компонент хлебных крошек, который можно добавить в наше приложение, чтобы улучшить навигацию и UX.

Полезные ссылки

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/generating-an-automatic-breadcrumb-in-react-router-fed01af1fc3, из которого вдохновлен этот пост.