Визначення Маршрутів для Навігації
Тепер, коли ми обгорнули наш застосунок у BrowserRouter для активації маршрутизації, наступним кроком є визначення маршрутів (шляхів), які міститиме наш застосунок. Ці маршрути визначають загальну структуру застосунку та контролюють, який контент відображається залежно від URL.
React Router надає два основні компоненти для визначення маршрутів: Routes та Route. Компонент Routes виступає контейнером для всіх визначень маршрутів, а компонент Route представляє конкретну конфігурацію маршруту.
Ось синтаксис для визначення маршрутів:
<Routes>
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
</Routes>
У цій структурі:
<path_value>: Вказує конфігурацію URL для маршруту;<component_to_render>: Визначає компонент, який буде відображено при переході користувача за цим шляхом.
Приклад
Застосуємо цю концепцію у нашому проєкті. Відкрийте файл App.jsx та імпортуйте компоненти Routes і Route з бібліотеки react-router-dom:
import { Routes, Route } from "react-router-dom";
У межах оператора return компонента App визначте маршрути для нашого застосунку:
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
</Routes>
</>
);
};
Пояснення коду:
- Рядки 4, 8:
<Routes>: Цей компонент слугує контейнером для визначення маршрутів у застосунку, виступаючи батьківським компонентом для окремих визначень маршрутів; - Рядок 5:
<Route>: Представляє визначення маршруту. Вказує, що коли шлях URL відповідає/, буде відображено компонент<HomePage />; - Рядок 6:
<Route>: Визначає ще один маршрут. Коли шлях URL відповідає/about, буде відображено компонент<AboutPage />; - Рядок 7:
<Route>: Визначає ще один маршрут. Коли шлях URL відповідає/contacts, буде відображено компонент<ContactsPage />.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain how to create the HomePage, AboutPage, and ContactsPage components?
What happens if a user navigates to a path that isn't defined in the routes?
Can you show how to add navigation links to switch between these routes?
Awesome!
Completion rate improved to 4.17Визначення Маршрутів для Навігації
Свайпніть щоб показати меню
Тепер, коли ми обгорнули наш застосунок у BrowserRouter для активації маршрутизації, наступним кроком є визначення маршрутів (шляхів), які міститиме наш застосунок. Ці маршрути визначають загальну структуру застосунку та контролюють, який контент відображається залежно від URL.
React Router надає два основні компоненти для визначення маршрутів: Routes та Route. Компонент Routes виступає контейнером для всіх визначень маршрутів, а компонент Route представляє конкретну конфігурацію маршруту.
Ось синтаксис для визначення маршрутів:
<Routes>
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
</Routes>
У цій структурі:
<path_value>: Вказує конфігурацію URL для маршруту;<component_to_render>: Визначає компонент, який буде відображено при переході користувача за цим шляхом.
Приклад
Застосуємо цю концепцію у нашому проєкті. Відкрийте файл App.jsx та імпортуйте компоненти Routes і Route з бібліотеки react-router-dom:
import { Routes, Route } from "react-router-dom";
У межах оператора return компонента App визначте маршрути для нашого застосунку:
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
</Routes>
</>
);
};
Пояснення коду:
- Рядки 4, 8:
<Routes>: Цей компонент слугує контейнером для визначення маршрутів у застосунку, виступаючи батьківським компонентом для окремих визначень маршрутів; - Рядок 5:
<Route>: Представляє визначення маршруту. Вказує, що коли шлях URL відповідає/, буде відображено компонент<HomePage />; - Рядок 6:
<Route>: Визначає ще один маршрут. Коли шлях URL відповідає/about, буде відображено компонент<AboutPage />; - Рядок 7:
<Route>: Визначає ще один маршрут. Коли шлях URL відповідає/contacts, буде відображено компонент<ContactsPage />.
Дякуємо за ваш відгук!
