Какие основные компоненты предоставляет React Router DOM для создания маршрутов?
Этот вопрос проверяет знание базовых возможностей React Router DOM
Короткий ответ
React Router DOM предоставляет ключевые компоненты, такие как <BrowserRouter>, <Routes>, <Route>, и <Link>. <BrowserRouter> используется для обертки приложения, чтобы включить маршрутизацию. <Routes> содержит набор маршрутов, а <Route> определяет, какой компонент рендерится при совпадении с определенным URL. <Link> используется для создания ссылок, которые позволяют навигацию без перезагрузки страницы.
Длинный ответ
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), где переходы между страницами осуществляются без полной перезагрузки.