При вставке тегов NavLink ломается сборка проекта на React. В чем проблема?

Question

[alexdolgop]

При вставке тегов NavLink ломается сборка проекта на React. Как только их меняю на обычные ссылки (а) все восстанавливается. В чем проблема?

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>

В браузере выдает это- invariant(context, "You should not use outside a ");

Comments

[alexdolgop]

"You should not use outside a " Подозреваю, что использую неправильные вложенности