When inserting NavLink tags, the assembly of the project on React breaks. What is the problem?

Question

React

When inserting NavLink tags, the assembly of the project on React breaks. As soon as I change them to regular links (a), everything is restored. What is the problem?

import {BrowserRouter, Route} from "react-router-dom";


const App = (props) => {

  return (
      <BrowserRouter>
     <div className="app__wrapper">

      <Header />

      <NavBar />

      <div className="changeable__page">

          <Route path='/dialogs' component={Dialogs}/>
          <Route path='/profile' component={Profile}/>
          <Route path='/news' component={News}/>
          <Route path='/music' component={Music}/>
          <Route path='/settings' component={Settings}/>

      </div>

     </div>
      </BrowserRouter>
  )
}



import NavLink from "react-router-dom/modules/NavLink";



const NavBar = () => {
    return  (

        <nav className={N.nav}>
              <div className={N.nav__list}>
                  <div className={N.link}><NavLink to="/Profile">Profile</NavLink></div>
                  <div className={N.link}><a href="/Dialogs">Messages</a></div>
                  <div className={N.link}><a href="/News">News</a></div>
                  <div className={N.link}><a href="/Music">Music</a></div>
                  <div className={N.link}><a href="/Settings">Settings</a></div>
              </div>
            </nav>

In the browser it gives this - invariant(context, "You should not use outside a ");