React中添加Link标签后组件无法正常加载的问题求助

核心问题 #

你的<Navbar />组件被放置在<BrowserRouter>组件外部，而react-router-dom的Link组件必须在Router上下文（由BrowserRouter提供）内部才能正常工作，脱离这个上下文会导致路由无法正确识别Link的跳转指令，进而引发组件加载失败。

修正后的App组件代码 #

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import About from "./components/About/About";
import { BrowserRouter, Route, Routes } from "react-router-dom"; // 移除无用的Router导入

export default function App() {
  return (
    <BrowserRouter> {/* 将BrowserRouter作为最外层容器 */}
      <Navbar /> {/* Navbar移入BrowserRouter内部 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} /> {/* 统一path为绝对路径写法 */}
      </Routes>
    </BrowserRouter>
  );
}

额外优化点 #

• 移除了未使用的Router导入，精简代码
• 统一路由path的绝对路径写法，避免路径匹配歧义
• 修正了原App组件中函数闭合括号的位置错误

验证效果 #

修改后，Navbar里的Link组件处于BrowserRouter的上下文范围内，点击Home/About链接时，路由会正确匹配对应的组件，页面可正常加载。

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