A-Level. React. Router.

React Router

Темы

  1. Віртуальний DOM
  2. SPA
  3. React Router .v6

Проблеми DOM

Головна проблема DOM — він ніколи не був розрахований для створення динамічного інтерфейсу користувача (UI).

Багато бібліотек спрощували роботу з DOM, але не вирішували проблему з продуктивністю.

Віртуальний DOM

Ми можемо вносити зміни до копії, виходячи з наших потреб, а після цього застосовувати зміни до реального DOM. При цьому відбувається порівняння DOM-дерева з його віртуальною копією, визначається різниця та запускається перерисовка того, що було змінено.

SPA

Це одна сторінка, з якою взаємодіє користувач, сторінка динамічно перерисовується, а не завантажуються цілі сторінки з сервера.

SPA Багатосторінковий сайт.
Один HTML файл На кожну сторінку окремий HTML файл.
Перехід між сторінками без перезавантаження. На кожну сторінку окремий додаток.

React Router

BrowserRouter

Підключаємо Router до нашого додатку

            import { BrowserRouter } from 'react-router-dom'

            ReactDOM.render(
              <BrowserRouter>
                <App />
              </BrowserRouter>,
              document.getElementById('root')
            );

Route

Описуємо відповідність роутів і компонентів які підключаємо
            <Routes>
              <Route path='/home/*' element={<Home />}>
              <Route path='/products' element={<Products />} />
            </Routes>

Link

дозволяють змінити сторінку (компонент), яка відображається в даний момент та зміниши поточний URL.

<Link to='/home'>Home<Link>

NavLink

Аналог <Link>, але який знає, чи є посилання активним.

<NavLink to='/home'>Home</NavLink>

Dynamic Routes, useParams

<Route path='/product/:id' element={<Product/>} />

:id - Динамічна частина URL.

useParams - повертає об'єкт із динамічними параметрами URL, які були зіставлені з path в компоненту Route

const params = useParams();

Navigate

Елемент Navigate змінює поточний URL, коли рендериться

<Navigate to='/home' />

useNavigate

Хук, за допомогою якого ми можемо програмно перенаправити на потрібний маршрут.
            const navigate = useNavigate();
            navigate('/products');
            navigate('/products', { replace: true });
            navigate(-2); // navigate(-1), navigate(1)
            navigate('/products', {
              search: `?sort=${isSortingAsc ? 'desc' : 'asc'}`,
            });

useLocation

Повертає об'єкт з інформацією про поточний URL.

const location = useLocation();

Task 1.

task react router

Links