Чтобы добавить React Router в свой проект, вы можете выполнить следующие действия:

1. Установите React Router: откройте каталог проекта в терминале и выполните следующую команду:

   npm install react-router-dom

   Эта команда установит пакет React Router из npm.

2. Импортировать React Router: в основной файл вашего проекта (обычно index.jsили App.js) импортируйте необходимые компоненты из React Router:

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

3. Настройте компонент Router: оберните компоненты вашего приложения компонентом Router, чтобы включить функцию маршрутизации:

   ReactDOM.render(
    <Router>
      <App />
    </Router>,
    document.getElementById('root')
   );

4. Определение маршрутов: внутри вашего компонента App(или любого другого компонента в соответствии со структурой вашего проекта) определите маршруты с помощью компонента Route:

   import { Route, Switch } from 'react-router-dom';
   function App() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    );
   }

   В приведенном выше примере мы определили маршруты для домашней страницы, страниц «О нас» и «Контакты». При необходимости вы можете добавить дополнительные маршруты.

5. Создание компонентов маршрута: создайте отдельные компоненты для каждого маршрута (например, «Домой», «О программе», «Контакты»), которые будут отображаться при доступе к соответствующему маршруту.

6. Использовать компонент Link: для навигации между маршрутами используйте компонент Link, предоставляемый React Router:

   import { Link } from 'react-router-dom';
   function Navigation() {
    return (
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    );
   }

   Компонент Linkгенерирует теги привязки () с правильным поведением маршрутизации.

Вот и все! Вы успешно добавили React Router в свой проект. Не забудьте импортировать необходимые компоненты, определить маршруты, создать компоненты маршрута и использовать компонент Linkдля навигации.