替换<a>标签为NavLink后页面崩溃，控制台报错求助

核心问题 #

Navbar组件位于BrowserRouter外部，而NavLink必须在路由上下文（由BrowserRouter提供）内部才能正常工作，这会导致组件无法获取路由相关上下文，进而引发报错，页面空白。

修复步骤 #

1. 调整BrowserRouter的包裹范围
   修改App.js，将BrowserRouter移到最外层，包裹所有需要使用路由的组件：

   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 { 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 (
       <BrowserRouter>
         <div className="appWeb">
           <Header />
           <Navbar />
           <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>
         </div>
       </BrowserRouter>
     );
   }
   
   export default App;
   

2. 统一路由路径格式
   修改Navbar.js中Catalog的路径为绝对路径，避免相对路径引发的路由跳转异常：

   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;
   

额外说明 #

• 移除了App.js中无用的Router导入，因为使用BrowserRouter即可满足需求，无需重复导入基础Router组件。
• 统一使用绝对路径格式，能避免嵌套路由或相对路径导致的跳转逻辑错误。

内容的提问来源于stack exchange，提问作者Visel