Пошук уроків, статей та іншого контенту
Встановите React Router, створите BrowserRouter і налаштуєте базову структуру маршрутизації застосунку.
React Router — бібліотека для маршрутизації в React-застосунках. Вона дає змогу показувати різні компоненти залежно від URL, не перезавантажуючи всю сторінку.
Наприклад:
/ — головна сторінка;
/about — сторінка «Про нас»;
/contacts — сторінка контактів.
Для цього React Router зіставляє URL із налаштованими маршрутами.
У кореневій папці React-застосунку виконайте:
npm install react-router-domПісля встановлення бібліотеку можна імпортувати у файлах застосунку:
import { BrowserRouter, Routes, Route } from "react-router-dom";Основні компоненти:
BrowserRouter — вмикає маршрутизацію для застосунку;
Routes — містить набір маршрутів;
Route — описує відповідність між URL і компонентом;
Link — створює навігаційне посилання без повного перезавантаження сторінки.
BrowserRouterBrowserRouter має охоплювати частину застосунку, у якій використовуються маршрути.
Зазвичай його додають у файл входу, наприклад src/main.jsx:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);Тепер усередині компонента App можна використовувати Routes, Route та інші можливості React Router.
BrowserRouter використовує адресу браузера для визначення поточного маршруту. Коли URL змінюється через React Router, React оновлює потрібну частину інтерфейсу без повного перезавантаження сторінки.
Створімо файл src/App.jsx:
import { Link, Route, Routes } from "react-router-dom";
function Home() {
return (
<section>
<h1>Головна сторінка</h1>
<p>Вітаємо в нашому застосунку.</p>
</section>
);
}
function About() {
return (
<section>
<h1>Про нас</h1>
<p>Це сторінка з інформацією про застосунок.</p>
</section>
);
}
function NotFound() {
return (
<section>
<h1>Сторінку не знайдено</h1>
<p>Перевірте адресу сторінки.</p>
</section>
);
}
function App() {
return (
<>
<nav>
<Link to="/">Головна</Link>{" "}
<Link to="/about">Про нас</Link>
</nav>
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</main>
</>
);
}
export default App;У цьому прикладі:
маршрут path="/" показує компонент Home;
маршрут path="/about" показує компонент About;
маршрут path="*" відповідає всім URL, для яких немає окремого маршруту;
Link змінює URL без перезавантаження сторінки.
RouteМаршрут має два основні параметри:
<Route path="/about" element={<About />} />path — шлях у браузері;
element — JSX-елемент, який потрібно показати для цього шляху.
Значення element записується як JSX:
<Route path="/about" element={<About />} />а не як посилання на компонент:
<Route path="/about" element={About} />LinkДля переходів між маршрутами використовуйте Link:
<Link to="/about">Про нас</Link>Link поводиться як посилання, але React Router перехоплює перехід і змінює вміст сторінки без повного перезавантаження документа.
Для переходу на головну сторінку:
<Link to="/">Головна</Link>Звичайний HTML-елемент a також може змінити адресу, але перехід через нього зазвичай призводить до повторного завантаження сторінки:
<a href="/about">Про нас</a>Тому для внутрішніх маршрутів React-застосунку краще використовувати Link.
Мінімальна структура файлів може мати такий вигляд:
src/
├── App.jsx
└── main.jsxФайл src/main.jsx:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);Файл src/App.jsx:
import { Link, Route, Routes } from "react-router-dom";
function Home() {
return <h1>Головна сторінка</h1>;
}
function About() {
return <h1>Про нас</h1>;
}
function App() {
return (
<>
<nav>
<Link to="/">Головна</Link>{" "}
<Link to="/about">Про нас</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</>
);
}
export default App;Після запуску застосунку:
npm run devвідкрийте адресу, яку покаже інструмент збірки. Перевірте переходи між головною сторінкою та сторінкою /about.
BrowserRouter не охоплює RoutesЯкщо Routes використовується за межами BrowserRouter, React Router не матиме доступу до контексту маршрутизації.
Неправильно:
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
</Routes>
);
}Якщо BrowserRouter не додано у main.jsx, потрібно охопити ним App:
<BrowserRouter>
<App />
</BrowserRouter>Компоненти потрібно імпортувати з react-router-dom:
import {
BrowserRouter,
Link,
Route,
Routes,
} from "react-router-dom";component замість elementУ сучасному синтаксисі маршрут налаштовується через element:
<Route path="/about" element={<About />} />Не потрібно використовувати застарілий варіант:
<Route path="/about" component={About} />Якщо застосунок має показувати власну сторінку для невідомих адрес, додайте маршрут із path="*":
<Route path="*" element={<NotFound />} />Для внутрішніх переходів використовуйте:
<Link to="/about">Про нас</Link>а не:
<a href="/about">Про нас</a>React Router встановлюється командою npm install react-router-dom.
BrowserRouter потрібно розмістити навколо частини застосунку, яка використовує маршрутизацію.
Routes містить набір маршрутів.
Route пов’язує URL із React-компонентом.
Link дає змогу переходити між сторінками без повного перезавантаження.
Для невідомих адрес можна додати маршрут із path="*".