Что такое React Router?

Краткий ответ

React Router — библиотека для навигации между страницами в React-приложениях 🧭 Позволяет создавать SPA (Single Page Applications) с разными URL.

// Основные компоненты:
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Полный ответ

React Router — как навигатор в машине: показывает, где ты сейчас и как попасть в другие места! 🚗🗺️

Зачем нужен React Router

Обычные сайты — как книга: переход между страницами перезагружает всё:

// ❌ Обычный сайт — перезагрузка страницы
// example.com/ → example.com/about (полная перезагрузка)

React-приложения — как одна страница с разными комнатами:

// ✅ React Router — без перезагрузки
// example.com/ → example.com/about (только содержимое меняется)

Основные компоненты

BrowserRouter — основа всего

// Оборачивает всё приложение
<BrowserRouter>
  <App />
</BrowserRouter>

Routes и Route — страницы

// Определяет, что показывать на разных путях
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contacts" element={<Contacts />} />
</Routes>

Link — переходы без перезагрузки

// Вместо <a href>, чтобы не перезагружать страницу
<Link to="/about">О нас</Link>
<Link to="/contacts">Контакты</Link>

Как это работает

Простой пример

function App() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
    </nav>
    
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

Когда пользователь:

Кликает на ссылку → URL меняется
React Router видит новый URL
Показывает нужный компонент
Страница не перезагружается! ⚡

Динамические маршруты

Страницы с параметрами

// Для страниц товаров, профилей и т.п.
<Route path="/user/:id" element={<UserProfile />} />
 
// В компоненте получаем id:
const {id} = useParams(); // Если URL /user/123, то id = "123"

Защита маршрутов

Приватные страницы

// Только для авторизованных пользователей
<Route 
  path="/profile" 
  element={
    <PrivateRoute>
      <Profile />
    </PrivateRoute>
  } 
/>

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

Забывать BrowserRouter

// ❌ Ошибка — использовать Route без BrowserRouter
function App() {
  return (
    <Route path="/" element={<Home />} /> // Не работает!
  );
}
 
// ✅ Правильно — оборачивать в BrowserRouter
function App() {
  return (
    <BrowserRouter>
      <Route path="/" element={<Home />} />
    </BrowserRouter>
  );
}

Использовать вместо Link

// ❌ Ошибка — перезагружает страницу
<a href="/about">О нас</a>
 
// ✅ Правильно — без перезагрузки
<Link to="/about">О нас</Link>

Простые правила

BrowserRouter — основа навигации 🏗️
Routes/Route — определяют страницы 🗺️
Link — переходы без перезагрузки 🔗
useParams — для динамических страниц 🎯
Без перезагрузки — быстро и удобно ⚡
SPA — одностраничное приложение 📱

React Router — как двери между комнатами: переходишь и попадаешь в нужное место! 🚪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪