I try make site with router, but tag <a> relaod my page, and i change they on Navlink but my site broke. I see white page and many errors in devtools

It's 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;

It's 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;

With tag "a" all work, but i change they on NavLink appear many errors and i see white page

CodePudding user response：

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>
    ...