React Router DOM NPM: основа работы с роутингом в React

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

React Router DOM можно установить из npm, используя команду `npm install react-router-dom`. Эта библиотека содержит несколько компонентов, которые можно использовать для создания маршрутов в приложении.

Пример:

jsx
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    
      

        

        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

export default App;

В этом примере мы импортируем несколько компонентов из библиотеки react-router-dom: `BrowserRouter`, `Switch`, `Route` и `Link`. Мы используем `BrowserRouter`, чтобы настроить маршрутеризацию для нашего приложения. Оболочка `Switch` используется для отображения только одного маршрута за раз. Компоненты маршрута, такие как `Route`, определяют путь, который будет отображаться на странице. Обратите внимание на использование `exact` для маршрута главной страницы.

Тег `Link` используется для создания ссылок на разные маршруты в приложении. Он предоставляет атрибут `to`, в котором можно указать путь к маршруту.

Каждый `Route` компонент в этом примере является функциональным компонентом, и каждый из них содержит простой текст, который будет отображаться на странице.

React Router DOM предоставляет множество других возможностей для создания динамических и сложных маршрутов в React приложениях, таких как параметры маршрута и редиректы. Она также полностью настраиваема и может быть интегрирована с другими пакетами и библиотеками для максимальной гибкости.