конспект курса 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;
Top comments (0)