react_router_-_biblioteka_marshrutizaciji_dlja_react

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
react_router_-_biblioteka_marshrutizaciji_dlja_react [2024/04/02 10:19]
tro 		react_router_-_biblioteka_marshrutizaciji_dlja_react [2024/04/08 06:25] (текущий)
tro
Строка 9: Строка 9:
 ===== Первинне налаштування ===== ===== Первинне налаштування =====
  
-Все, що необхідно зробити, це обернути компонентом <BrowserRouter> всі програми.+1. обернути компонентом **BrowserRouter** всі програми в **main.jsx**.
 <code> <code>
-index.js 
 import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
  
Строка 23: Строка 22:
  
 </code> </code>
 +2. В підлеглих компонентах використовувати **routes** і **route**
 **Приклад:** **Приклад:**
 <code> <code>
Строка 150: Строка 150:
  
 </code> </code>
 +===== Хук UseParams =====
 +[[xuk_useparams|Хук useParams]]
 +===== Вкладені маршрути =====
 +  - Вкладені маршрути дозволяють описувати логіку «підсторінок», тобто якийсь URL по якому крім батьківського компонента цілої сторінки буде відображатися ще якийсь дочірній, вкладений компонент.
 +  - Наприклад, нам необхідно щоб на /about/mission, /about/team та /about/reviews крім контенту сторінки «Про нас» відображалася ще якась додаткова, більш специфічна інформація. Нехай це буде кілька різноманітних компонентів: стаття про місію нашої компанії, галерея з інформацією про співробітників та відгуки користувачів.
 +<code>
 +// ✅ Правильно
 +<Route path="/about" element={<About />}>
 +  <Route path="mission" element={<Mission />} />
 +  <Route path="team" element={<Team />} />
 +  <Route path="reviews" element={<Reviews />} />
 +</Route>
 +</code>
 +  * Ми декларативно вклали дочірні маршрути всередину батьківського <Route>. Саме такий синтаксис вказує на вкладений маршрут, компонент якого буде відображатися десь усередині батьківського компонента.
 +  * Значення пропсу path у вкладеного маршруту вказується відносно батьківського, саме тому ми передали значення path="mission", а не повний шлях path="/about/mission".
 +  * Відносні шляхи записуються без провідного символу /, тобто path="mission", а не path="/mission". Якщо додати слеш, то ми навпаки створимо окремий маршрут /mission та зламаємо логіку маршрутизації.
 +===== Налаштування Vercel =====
 +[[vercel_-_dlja_publikaciji_proektu_z_gitu_v_intet_xosting|vercel - для публікації проекту з Гіту в інтет\хостинг]]
 +
  • /sites/data/attic/react_router_-_biblioteka_marshrutizaciji_dlja_react.1712053143.txt.gz
  • Последнее изменение: 2024/04/02 10:19
  • — tro