React Router v6.4 tutorial

конспект курса React Router in Depth
gitHub автора материалы

Концепция

• с помощью библиотеки react-router-dom создается структура , в которой компоненты будут отображаться в зависимости от текущего URL-адреса, и управление этими компонентами будет осуществляться с помощью маршрутизации.
• при переходе между страницами/компонентами перезагрузки страницы не происходит, также не происходит отправка запросов на сервер( только если вы сами этого не пожелаете).

Урок 1 Introduction

1) Запустим CRA npx create-react-app
2) Установим npm install react-router-dom

Получаем:

Урок 2 Basics

Этот пример для версии <v6.4 (это все еще валидный способ использования React Router)

---

BrowserRouter-компонент, который оборачивает всё приложение и позволяет использовать Route внутри.
Route-связывает URL с компонентами, загрузкой данных и изменением данных.
Routes(применяется для версии<v6.4!)- обертка для Route.
-Всякий раз, когда URL изменяется, Routes просматривает все свои дочерние маршруты, чтобы найти наилучшее совпадение, и отображает эту ветвь пользовательского интерфейса.
-Элементы Route могут быть вложенными, чтобы указать вложенный пользовательский интерфейс, который также соответствует вложенным путям URL.
Link-создает пути URL, как тег <a>
NavLink-это подтип Link + добавляет класс active

---

1) App.js

// Импортируем  требуемые компоненты из react-router-dom
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";

// Создаем папку pages в src , а в ней 2 компонента, импортируем их...
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    // Оборачиваем все приложение в BrowserRouter
    // Внутри прописываем Route -пока они ничего не делаюет, 
    // Route просто указывают на то, что 
    // если URL изменится на path, нужно отрендарить element 
    // это можно проверить вручную, изменив URL

    //index <=> path="/" эквивалентны

    // Добавим NavLink, при нажатии на него, происходит смена URL,
    // происходит роутинг и перерисовка страницы без обновления

    <BrowserRouter>
      <header>
        <nav>
          <h1>Jobarouter</h1>
          <NavLink to="/">Home</NavLink>
          <NavLink to="about">About</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;

Получаем:

Урок 3 Router Provider, createBrowserRouter & Outlet

Этот и последующие уроки разбирают новые фитчи, которые появились в версии >v6.4

Переделаем наше приложение:

Теперь вместо BrowserRouter мы будем хранить логику наших роутев в const router и передавать router как пропс в <RouterProvider router={router} />

1) App.js

//импортируем новые зависимости, а ненужные удаляем 
import {   
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider} from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
// вместо <BrowserRouter> ... </BrowserRouter> используем <RouterProvider router={router} />
// а все, что было внутри BrowserRouter переносим в const router

 <RouterProvider router={router} />
  );
}

export default App;