Как исправить ошибкуu seLocation() may be used only in the context of a component?

Question

JivetH @JivetH

Как исправить ошибкуu seLocation() may be used only in the context of a component?

Я впервые создаю сайт на React JS. На сайте есть Header, где я хочу использовать react-router-dom. Но возникает ошибка, не могу понять в чем проблема. Искал много где. Ничего не нашёл. Помогите пожалуйста, очень хочу сделать сайт, но после такого хочется сдаться.

App.js:

import './App.css';
import Header from './Components/Header';

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './Pages/Main';
import Documents from './Pages/Documents';
import Additionally from './Pages/Additionally';
import Profile from './Pages/Profile';

function App() {
  return (
    <div className="App">
      <Header/>
      <BrowserRouter>
        <Routes>
          <Route exact path='/' element={<Main/>}/>
          <Route exact path='/documents' element={<Documents/>}/>
          <Route exact path='/additionally' element={<Additionally/>}/>
          <Route exact path='/profile' element={<Profile/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Header.js:

import React, { Component } from 'react';
import { Container, FormControl, Nav, Navbar, NavbarBrand } from 'react-bootstrap';
import logo from '../ZP Color.svg';
import '../App.css';
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle';
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse';
import { NavLink } from 'react-router-dom';

class Header extends Component {
    render() {
        return (
            <div>
                <Navbar collapseOnSelect expand='md' bg ='dark' variant='dark'>
                    <Container>
                        <NavbarBrand hred='/'>
                            <img src={logo} className="App-logo" alt="logo"/>
                        </NavbarBrand>
                        <NavbarToggle aria-controls='responsive-navbar-nav'/>
                        <NavbarCollapse id='responsive-navbar-nav'>
                            <Nav className='mr-auto'>
                                <NavLink href='/'>Главная</NavLink>
                                <NavLink href='/documents'>Документы</NavLink>
                                <NavLink href='/additionally'>Дополнительно</NavLink>
                                <NavLink href='/profile'>Профиль</NavLink>
                            </Nav>
                        </NavbarCollapse>
                    </Container>
                </Navbar>
            </div>
        );
    }
}

export default Header;

Ошибка:

ERROR
useLocation() may be used only in the context of a <Router> component.
    at invariant (http://localhost:3000/static/js/bundle.js:1338:11)
    at useLocation (http://localhost:3000/static/js/bundle.js:46309:102)
    at useResolvedPath (http://localhost:3000/static/js/bundle.js:46479:7)
    at NavLinkWithRef (http://localhost:3000/static/js/bundle.js:45534:75)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:32483:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:35054:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:37101:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:22075:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:22119:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:22176:35)