Основна проблема, пов’язана з пряжею React Router, полягає в тому, що її може бути важко правильно налаштувати. Це вимагає багато налаштувань і налаштувань, і якщо це зробити неправильно, це може призвести до неочікуваної поведінки або помилок. Крім того, документація для React Router yarn не завжди чітка чи актуальна, що ускладнює розробникам вирішення проблем.
add react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
1. Цей рядок імпортує компоненти BrowserRouter, Route і Link з бібліотеки react-router-dom:
імпортувати { BrowserRouter як Router, Route, Link } із “react-router-dom”;
2. Цей рядок загортає всю програму в компонент Router, щоб забезпечити функціональність маршрутизації:
3. Цей елемент div містить список посилань, які будуть використовуватися для навігації між різними маршрутами:
- Головна
- МЕНЮ
- теми
4. Цей елемент hr використовується як візуальний роздільник між навігаційними посиланнями та вмістом маршруту:
5. Ці рядки визначають три різні маршрути для нашої програми за допомогою компонента Route React Router:
6. Нарешті, цей закриваючий тег div закриває наш елемент div оболонки програми:
що таке React Router
React Router — це бібліотека маршрутизації для React, яка дозволяє розробникам створювати та керувати маршрутами в своїх програмах React. Він забезпечує спосіб декларативного відображення маршрутів до компонентів, обробки параметрів URL-адреси та керування подіями навігації. Він також надає такі функції, як динамічне зіставлення маршрутів, обробка переходів розташування та відновлення прокручування.
Що таке пряжа
Yarn — це менеджер пакетів для JavaScript, який допомагає розробникам ефективніше та безпечніше керувати своїми залежностями. Він використовується React Router для встановлення, оновлення та налаштування пакетів. Yarn також допомагає розробникам відстежувати залежності своїх проектів, гарантуючи, що всі необхідні пакети встановлені та оновлені. Це полегшує роботу над проектами з кількома розробниками, оскільки кожен може легко перевірити, які версії пакетів йому потрібні.
