React Router v6.4 tutorial
Tags: react, reactrouter, beginners
Published: 2023-03-02 23:15:01

конспект курса [React Router in Depth](https://www.youtube.com/watch?v=OMQ2QARHPo0&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&index=1&t=92s)
gitHub автора [материалы](https://github.com/iamshaunjp/react-router-in-depth)

**Концепция**
- с помощью библиотеки [react-router-dom](https://reactrouter.com/en/main) создается структура , в которой компоненты будут отображаться в зависимости от текущего URL-адреса, и управление этими компонентами будет осуществляться с помощью маршрутизации. 
- при переходе между страницами/компонентами перезагрузки страницы не происходит, также не происходит отправка запросов на сервер( только если вы сами этого не пожелаете).

## [Урок 1](https://www.youtube.com/watch?v=OMQ2QARHPo0&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&index=1) Introduction

1) Запустим [CRA](https://reactjs.org/docs/create-a-new-react-app.html) `npx create-react-app`
2) Установим `npm install react-router-dom`

Получаем:
{% codesandbox 
<iframe src="https://codesandbox.io/embed/my-app-1-8l9v60?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="my-app 1"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>%}

## [Урок 2](https://www.youtube.com/watch?v=XN7E5tKM-no&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&index=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
// Импортируем  требуемые компоненты из 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;
```

Получаем:
{% codesandbox
<iframe src="https://codesandbox.io/embed/my-app-2-nztjid?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="my-app 2"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe> %}

## [Урок 3](https://www.youtube.com/watch?v=5s57C7leXc4&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&index=3) Router Provider, createBrowserRouter & Outlet
_Этот и последующие уроки разбирают новые фитчи, которые появились в версии >v6.4_

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

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

```React
//импортируем новые зависимости, а ненужные удаляем 
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;
```