В чем принцип работы React Router

Question

В чем принцип работы React Router

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

React Router — это библиотека для маршрутизации в React-приложениях. Она позволяет динамически менять содержимое страницы без перезагрузки (SPA-подход).

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

BrowserRouter — обертка для работы с HTML5 History API.
Routes — контейнер для маршрутов.
Route — определяет, какой компонент отображать по пути (path).
Link и NavLink — навигационные ссылки (без перезагрузки).

Пример:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Как работает:
При клике на Link URL меняется, React Router сверяет путь с Route и рендерит соответствующий компонент. Всё происходит на клиенте без запросов к серверу.

Ответ 18+ 🔞

Слушай, а вот эта ваша React Router, ну такая библиотека, чтобы в реакте по страничкам прыгать без этих вот дурацких перезагрузок. SPA называется, Single Page Application, типа одна страница, а контент меняется — магия, блядь!

Ну, основные детальки, на которые смотреть надо:

BrowserRouter — это типа главный дирижёр, который с браузерной историей работает. Без него — нихуя не попляшешь.
Routes — как ящик, куда все маршруты складываешь.
Route — это уже конкретная инструкция: "чувак, если в адресной строке вот такая хуйня, показывай вот этот компонент".
Link и NavLink — это наши кнопочки-ссылочки, которые тыкаешь, а страница не перезагружается, просто контент меняется. Удобно, ёпта!

Смотри, как это выглядит в коде, простейший пример:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Домой</Link>
        <Link to="/about">Про нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

А работает это всё как, спросишь? Да элементарно, Ватсон! Жмёшь ты на Link — адрес в браузере тихо меняется. React Router, этот хитрожопый сторож, видит это, бежит проверять свои Route и говорит: "Ага, путь /about? Так, значит, компонент <About /> на сцену, блядь!". И всё это без единого запроса к серверу, чисто на клиенте. Красота, ебать мои старые костыли!