React Router Dom - Ця програма для управління маршрутизацією веб-додатки, створеного на базі React. Він дозволяє створювати односторінкові додатки з динамічною навігацією, де кожен маршрут являє собою окрему сторінку. React Router Dom надає набір компонентів, які дозволяють визначити маршрути та їх обробники.
Щоб встановити React Router Dom у свій проект, виконайте наступні кроки:
- Відкрийте командний рядок або термінал у папці проекту.
- Введіть команду npm install react-router-dom і натисніть Enter. Це встановить React Router Dom у ваш проект.
- Після встановлення ви можете імпортувати та використовувати компоненти React Router Dom у своєму проекті. Наприклад, для створення маршрутів можна використовувати компоненти BrowserRouter і Route .
Приклад використання React Router Dom:
from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; function App() < return ( ); >export default App; `>
У цьому прикладі ми створюємо маршрути для кореневої сторінки та сторінки "про". Коли користувач переходить на певний маршрут, відповідний компонент відображається на сторінці.
Тепер ви знаєте, як встановити та використовувати React Router Dom у своєму проекті. Ви можете використовувати його для створення динамічної навігації у своєму веб-додатку на React.
Встановлення react router dom
Дотримуйтесь інструкцій нижче, щоб встановити react Router DOM на свій проект:
Після виконання цих кроків, ви успішно встановили і налаштували React Router DOM на свій проект. Тепер ви можете створювати маршрути та використовувати навігацію у своєму додатку React.
Крок 1: Створення нового проекту
Для цього потрібно відкрити командний рядок (термінал) і виконати наступну команду:
- npx create-react-app my-app
Тут my-app-це назва вашого проекту. Ви можете використовувати будь-яке ім'я замість цього.
Крок 2: Установка react-router-Dom пакета
Після створення нового проекту React, необхідно встановити пакет ' react-router-dom`. Цей пакет дозволяє використовувати роутинг в React додатку.
Для установки пакета відкрийте командний рядок в корені вашого проекту і виконайте наступну команду:
npm install react-router-dom
Або якщо ви використовуєте Yarn:
yarn add react-router-dom
Після успішної установки пакета, ви можете приступити до його використання у вашому проекті.
Крок 3: налаштування маршрутизації
Після встановлення бібліотеки react-router-dom потрібно налаштувати маршрутизацію у вашому проекті.
1. Імпортуйте компоненти, необхідні для налаштування маршрутизації:
import < BrowserRouter, Switch, Route >from 'react-router-dom';2. Оберніть кореневий компонент у компонент BrowserRouter:
3. Використовуйте компонент Switch для об'єднання компонентів маршрутизації в єдину групу:
4. Визначте маршрути за допомогою компонента Route. Вкажіть шлях (атрибут path) і компонент (атрибут component), який буде відображатися при збігу маршруту.
Тепер ваша маршрутизація налаштована і готова до використання!