Library. React-router-dom

🧱 Суть

react-router-dom – библиотека маршрутизации для React-приложений.
Позволяет создавать навигацию без полной перезагрузки страницы.

📦 Проблема

React сам по себе не умеет управлять переходами между страницами SPA.

✅ Решение

Использовать react-router-dom для описания маршрутов и навигации.

💻 Код

Установка:

npm install react-router-dom

Базовая настройка:

import { BrowserRouter,  Routes,  Route } from 'react-router-dom';
 
export function App() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/about" element={<About />} />
			</Routes>
		</BrowserRouter>
	);
}

Переход по ссылке:

import { Link } from 'react-router-dom';
 
<Link to="/about">About</Link>

Программная навигация:

import { useNavigate } from 'react-router-dom';
 
const navigate = useNavigate();
 
navigate('/about');

Частые ошибки

забыли обернуть приложение в BrowserRouter
размещают маршруты в разных компонентах вместо единого роутера
смешивают навигацию с бизнес-логикой

🎯 Вывод

react-router-dom отвечает за маршрутизацию в React
BrowserRouter подключается один раз для всего приложения
переходы выполняются через Link или useNavigate()
в FSD маршруты обычно располагают в app/router

LETUNOFF DOCS

Навигация