Какие основные компоненты предоставляет React Router DOM для создания маршрутов?

React Router DOM — библиотека для управления маршрутизацией в React. Основные компоненты:

• <BrowserRouter>: Главная обертка, которая связывает маршрутизацию с историей браузера. Все маршруты должны находиться внутри этого компонента.

  import { BrowserRouter } from 'react-router-dom';
  const App = () => (
  	<BrowserRouter>
  		{/* Routes go here */}
  	</BrowserRouter>
  );

• <Routes>: Контейнер для маршрутов. Он заменяет <Switch> из старых версий и определяет набор маршрутов для проверки.

  import { Routes, Route } from 'react-router-dom';
  const AppRoutes = () => (
  	<Routes>
  		<Route path="/" element={<Home />} />
  		<Route path="/about" element={<About />} />
  	</Routes>
  );

• <Route>: Определяет путь (path) и связанный компонент (element). Если текущий URL совпадает с path, то рендерится указанный компонент.

• <Link>: Заменяет стандартные HTML-ссылки (<a>) для навигации между страницами без перезагрузки.

  import { Link } from 'react-router-dom';
  const Navbar = () => (
  	<nav>
  		<Link to="/">Home</Link>
  		<Link to="/about">About</Link>
  	</nav>
  );

Эти компоненты используются в большинстве приложений для создания SPA (Single Page Application), где переходы между страницами осуществляются без полной перезагрузки.