Как правильно использовать react router?

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

Когда React Router будет установлен, вы можете начать использовать его в вашем проекте. Важными компонентами React Router являются `BrowserRouter`, `Switch`, `Route` и `Link`.

Вот пример использования React Router:

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

const Home = () => {
  return <h1>Главная страница</h1>;
};

const About = () => {
  return <h1>О нас</h1>;
};

const NotFound = () => {
  return <h1>Страница не найдена</h1>;
};

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Главная</Link>
          </li>
          <li>
            <Link to="/about">О нас</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;
```

В этом примере у нас есть компоненты `Home`, `About` и `NotFound`, которые отображают различные страницы. Мы используем компоненты `Link` для создания навигационной панели, а компоненты `Route` для определения путей и подключения соответствующих компонентов. Компонент `Switch` используется для отображения только одной страницы одновременно.

Теперь о структуре и функциональности компонента "Header". Обычно компонент "Header" содержит верхнюю часть страницы, включая логотип, навигационную панель и другие элементы интерфейса. Его структура может выглядеть следующим образом:

```jsx
import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header>
      <nav>
        <ul>
          <li>
            <Link to="/">Главная</Link>
          </li>
          <li>
            <Link to="/about">О нас</Link>
          </li>
          {/* Дополнительные пункты меню */}
        </ul>
      </nav>
    </header>
  );
};

export default Header;

```

Компонент "Header" здесь содержит навигационную панель с использованием компонентов `Link`. Вы можете добавлять дополнительные пункты меню или элементы интерфейса по вашему усмотрению.

Компонент "Header" можно использовать входящим компонентом, таким образом:

```jsx
import React from 'react';
import Header from './Header';

const App = () => {
  return (
    <div>
      <Header />

      {/* Остальной контент страницы */}
    </div>
  );
};

export default App;
```

Таким образом, компонент "Header" будет отображаться над остальным контентом страницы.

- Поместите компонент  на самый верхний уровень структуры компонентов, обычно непосредственно внутри компонента .
- Используйте компонент  вместо href для навигации по страницам. Например, замените код Услуги на Услуги.
- Правильно использовать атрибут Component вместо Component с большой буквы. Замените  на .