За какво се използва библиотеката react-router-dom в…

react-router-dom се използва за създаване на едностранични приложения (SPA) в React, като осигурява маршрутизиране от страна на клиента.

За какво е необходимо?

Навигация: Позволява на потребителите да преминават между различни "страници" (компоненти) без пълно презареждане на страницата.
Управление на URL: Синхронизира текущия URL в адресната лента на браузъра с показвания компонент.
Динамично маршрутизиране: Позволява дефиниране на маршрути с параметри (например, /users/:id) за зареждане на специфични данни.
Програмирано навигиране: Позволява пренасочване на потребителя чрез код (например, след успешно запазване на данни).

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

BrowserRouter: Обвивка за приложението, която използва API History за синхронизиране на URL.
Routes: Контейнер за дефиниране на маршрутите.
Route: Определя съответствието между URL и компонента.
Link: Компонент за създаване на връзки, които предотвратяват презареждане на страницата.
useNavigate: Hook за програмирано навигиране.
useParams: Hook за извличане на параметри от URL.

Пример за използване:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Начало</Link> {' '}
        <Link to="/about">За нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Пример за динамичен маршрут */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

За какво се използва библиотеката react-router-dom в React?