Реализация Breadcrumbs с React Router: Пошаговое руководство для начинающих

Введение в Breadcrumbs и React Router

Breadcrumbs или "хлебные крошки" — это элемент интерфейса, который показывает путь пользователя от главной страницы до текущей. Они помогают ориентироваться, особенно на сайтах с большим количеством страниц.

React Router — это мощный инструмент для работы с маршрутизацией в React. Он позволяет настраивать маршруты и управлять состоянием URL в вашем приложении. Вместе они создают удобный и логичный интерфейс.

Шаг 1: Подготовка проекта

Прежде чем начать, убедитесь, что ваш проект настроен для использования React Router. Если вы еще не установили его, сделайте это с помощью команды:

npm install react-router-dom

После этого добавьте Router в корень вашего приложения:

import React from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/contact" element={<Contact />} />

      </Routes>

    </Router>

  );

}



function Home() {

  return <h1>Главная страница</h1>;

}



function About() {

  return <h1>О нас</h1>;

}



function Contact() {

  return <h1>Контакты</h1>;

}



export default App;

Шаг 2: Создание компонента Breadcrumbs

Теперь создадим компонент Breadcrumbs. Он будет отображать путь, основываясь на текущем маршруте. Для этого:

1. Получите текущий маршрут: Используйте useLocation из React Router, чтобы определить, где находится пользователь.
2. Разделите путь: Разбейте URL на сегменты для создания списка.
3. Составьте ссылки: С помощью Link создайте кликабельные элементы для перехода.

import React from 'react';

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



function Breadcrumbs() {

  const location = useLocation();

  const pathnames = location.pathname.split('/').filter((x) => x);



  return (

    <nav>

      <Link to="/">Главная</Link>

      {pathnames.map((value, index) => {

        const to = `/${pathnames.slice(0, index + 1).join('/')}`;

        return (

          <span key={to}>

            {' > '}

            <Link to={to}>{value}</Link>

          </span>

        );

      })}

    </nav>

  );

}



export default Breadcrumbs;

Шаг 3: Интеграция Breadcrumbs в приложение

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

import React from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Breadcrumbs from './Breadcrumbs';



function App() {

  return (

    <Router>

      <Breadcrumbs />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/about/team" element={<Team />} />

        <Route path="/contact" element={<Contact />} />

      </Routes>

    </Router>

  );

}



function Home() {

  return <h1>Главная страница</h1>;

}



function About() {

  return <h1>О нас</h1>;

}



function Team() {

  return <h1>Наша команда</h1>;

}



function Contact() {

  return <h1>Контакты</h1>;

}



export default App;

Теперь Breadcrumbs будут автоматически обновляться при навигации по страницам.