react_router_-_biblioteka_marshrutizaciji_dlja_react

Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
react_router_-_biblioteka_marshrutizaciji_dlja_react [2024/04/02 10:13]
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>
Строка 71: Строка 71:
  
 </code> </code>
 +===== Компоненти <Link> та <NavLink> =====
 +Для створення навігації не можна використовувати звичайний тег <a href="/about">. При кліку, замість того щоб змінити URL на поточній сторінці, і дозволити маршрутизатору виконати навігацію на стороні клієнта, браузер перезавантажить сторінку.
 +Для створення посилань використовуються компоненти <Link> та <NavLink>. Вони рендерять тег <a>, але стандартна поведінка посилання змінена так, що при натисканні просто оновлюється URL в адресному рядку браузера, без перезавантаження сторінки.
 +<code>
 +// src/components/App.jsx
 +
 +import { Routes, Route, NavLink } from "react-router-dom";
 +import clsx from 'clsx';
 +import Home from "path/to/pages/Home";
 +import About from "path/to/pages/About";
 +import Products from "path/to/pages/Products";
 +import NotFound from 'path/to/pages/NotFound';
 +import css from './App.module.css';
 +
 +const buildLinkClass = ({ isActive }) => {
 +  return clsx(css.link, isActive && css.active);
 +};
 +
 +export const App = () => {
 +  return (
 +    <div>
 +      <nav className={css.nav}>
 +        <NavLink to="/" className={buildLinkClass}>
 +          Home
 +        </NavLink>
 +        <NavLink to="/about" className={buildLinkClass}>
 +          About
 +        </NavLink>
 +        <NavLink to="/products" className={buildLinkClass}>
 +          Products
 +        </NavLink>
 +      </nav>
 +  
 +      <Routes>
 +        <Route path="/" element={<Home />} />
 +        <Route path="/about" element={<About />} />
 +        <Route path="/products" element={<Products />} />
 +  <Route path="*" element={<NotFound />} />
 +      </Routes>
 +    </div>
 +  );
 +};
 +
 +</code>
 +===== URL-параметри =====
 +<code>
 +<Route path="/blog/:postId" element={<BlogPost />} />
 +</code>
 +Додамо до нашої програми маршрут сторінки одного продукту з адресою /products/:productId. Це окрема сторінка, ніяк не прив'язана до /products - сторінці відображення всіх продуктів.
 +<code>
 +// src/components/App.jsx
 +
 +import { Routes, Route, Link } from "react-router-dom";
 +import Home from "path/to/pages/Home";
 +import About from "path/to/pages/About";
 +import Products from "path/to/pages/Products";
 +import NotFound from "path/to/pages/NotFound";
 +import ProductDetails from "path/to/pages/ProductDetails";
 +
 +export const App = () => {
 +  return (
 +    <div>
 +      <nav>
 +        <Link to="/">Home</Link>
 +        <Link to="/about">About</Link>
 +        <Link to="/products">Products</Link>
 +      </nav>
 +      <Routes>
 +        <Route path="/" element={<Home />} />
 +        <Route path="/about" element={<About />} />
 +        <Route path="/products" element={<Products />} />
 +        <Route path="/products/:productId" element={<ProductDetails />} />
 +        <Route path="*" element={<NotFound />} />
 +      </Routes>
 +    </div>
 +  );
 +};
 +
 +</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.1712052833.txt.gz
  • Последнее изменение: 2024/04/02 10:13
  • — tro