Создание хлебных крошек в React.js включает несколько шагов. Хлебные крошки — это средство навигации, которое помогает пользователям понять свое текущее местоположение на веб-сайте или в иерархии приложений. Вот пошаговое руководство по созданию хлебных крошек в React.js:
1. **Настройте свой проект.**
Убедитесь, что у вас настроен проект React.js с необходимыми зависимостями.
2. **Создайте компонент хлебных крошек.**
Создайте новый компонент для визуализации хлебных крошек.
```jsx
// хлебные крошки.js
импортировать React из «реагировать»;
импортировать {Link} из «реагировать-роутер-дом»;
const Breadcrumbs = ({breadcrumbs}) =› {
return (
‹div className="breadcrumbs"›
{breadcrumbs.map((breadcrumbs, index) =› (
‹span key={index}›
{index › 0 && ‹span className="separator"›/‹/span›}
{breadcrumb.link ? (
‹Link to={ breadcrumb.link}›{breadcrumb.label}‹/Link›
) : (
‹span›{breadcrumb.label}‹/span›
)}
‹/span ›
))}
‹/div›
);
};
экспортировать хлебные крошки по умолчанию;
```
3. **Создайте стиль для своих навигационных крошек.**
Вы можете стилизовать свои навигационные крошки, используя CSS или библиотеку стилей по вашему выбору (например, стилизованные компоненты, CSS-модули).
```css
/* Breadcrumbs.css */
.breadcrumbs {
display: flex;
align-items: center;
font-size: 14px;
}
.separator {
margin: 0 5px;
}
```
4. **Используйте компонент Breadcrumbs:**
Импортируйте и используйте компонент Breadcrumbs в своем приложении.
```jsx
// App.js
импортировать React из «реакции»;
импортировать {BrowserRouter as Router, Route, Switch} из «react-router-dom»;
импортировать хлебные крошки из «./Breadcrumbs»;
const Home = () =› ‹div›Home‹/div›;
const Products = () =› ‹div›Products‹/div›;
const Category = () =› ‹div› Категория‹/div›;
const ProductDetail = () =› ‹div›Сведения о продукте‹/div›;
const App = () =› {
const Breadcrumbs = [
{ label: 'Главная', link: '/' },
{ label: 'Products', link: '/products ' },
{ label: 'Категория', link: '/products/category' },
{ label: 'Сведения о продукте' },
];
return (
‹Маршрутизатор›
‹div className="app"›
‹Breadcrumbs Breadcrumbs={breadcrumbs} /›
‹Switch›
‹Route path=" /” точный компонент={Главная} /›
‹Путь маршрута=”/продукты” точный компонент={Продукты} /›
‹Путь маршрута=”/продукты/категория” точный компонент={Категория} /›
‹Route path=”/products/category/:productId” component={ProductDetail} /›
‹/Switch›
‹/div›
‹/Router›
);
};
экспортировать приложение по умолчанию;
```
В этом примере мы используем библиотеку `react-router-dom` для маршрутизации и навигации. Компонент «Хлебные крошки» принимает массив объектов «хлебных крошек», каждый из которых содержит «метку» и необязательную «ссылку» для навигации. Вы можете настроить маршрутизацию и данные хлебных крошек в соответствии с потребностями вашего приложения.
Не забудьте установить и настроить библиотеку `react-router-dom`, если вы еще этого не сделали:
```bash
npm install react-router-dom
```
Это базовый пример, который поможет вам приступить к созданию хлебных крошек в React.js. Вы можете улучшить навигационные цепочки, сделав их динамическими на основе текущего маршрута или интегрировав их с более сложными сценариями маршрутизации в своем приложении.
