When i change tag "a" to NavLink i dont see my page. In devtools appear many errors?

Question

I try to make site with router, but using anchor tag <a> reloads the page. When I changed them to NavLink component my site broke. I see white page and many errors in devtools.

App.js

import "./App.css";
import "./Components/MainContent/Main/MainContent.module.css"
import "./Components/Header/Header.module.css"
import "./Components/Navbar/Navbar.module.css"
import Header from "./Components/Header/Header";
import Navbar from "./Components/Navbar/Navbar";
import MainContent from "./Components/MainContent/Main/MainContent";
import { Router, Route, Routes, BrowserRouter } from "react-router-dom";
import Catalog from "./Components/MainContent/Catalog/Catalog"
import Busket from "./Components/MainContent/Busket/Busket"
import Contacts from "./Components/MainContent/Contacts/Contacts"

function App() {
  return (
    <div className="appWeb">
      <Header />
      <Navbar />
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<MainContent />} />
          <Route path='/index.html' element={<MainContent />} />
          <Route path='/Catalog' element={<Catalog />} />
          <Route path='/Busket' element={<Busket />} />
          <Route path='/Contacts' element={<Contacts />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Navbar.js

import React from "react";
import styles from "./Navbar.module.css"
import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav className={styles.navbar}>
      <div className={styles.navbar__links}>
        <NavLink to="/">Главная</NavLink>
      </div>
      <div className={styles.navbar__links}>
        <NavLink to="Catalog">Каталог</NavLink>
      </div>
      <div className={styles.navbar__links}>
        <NavLink to="/Busket">Корзина</NavLink>
      </div>
      <div className={styles.navbar__links}>
        <NavLink to="/Contacts">Контакты</NavLink>
      </div>
    </nav>
  );
}

export default Navbar;

Answer 1

To be working, NavLinks should be nested inside a Router component. So your Navbar containing the links should move from outside the router:

<Navbar/>
<BrowserRouter>
  <Routes>
    ...

To inside the router:

<BrowserRouter>
  <Navbar/>
  <Routes>
    ...