React Router v6配置后导航栏消失页面空白问题求解

你的代码有三处明确错误，其中导包错误是直接导致页面空白、导航栏消失的核心原因：

• 导入语句别名写错：你写的import { BrowserRouter as Route, Routes, Link } from 'react-router-dom'把BrowserRouter重命名成了Route，直接导致两个问题：一是代码里写的<BrowserRouter>标签对应的组件根本没被导入，属于未定义组件；二是真正用来做路由匹配的Route组件完全没导入，后面写的所有<Route>标签实际是被重命名的BrowserRouter，整个路由组件树结构完全错误，渲染直接中断。部分Vite/CRA热更新场景下这类错误不会在终端打印明确报错，只会表现为白屏。
• 冗余的v5遗留属性：React Router v6默认就是路径精确匹配，不需要加v5版本的exact属性，加了也不会生效，属于无效冗余代码。
• 导航栏渲染位置错误：如果你需要Navbar在所有路由页面全局显示，不能把它放在<Routes>标签内部——<Routes>只会渲染当前路径匹配到的唯一一个路由元素，放在内部的公共组件只会在匹配对应路径时出现，要全局显示必须放在<Routes>外层、<BrowserRouter>包裹的上下文范围内。

// 修正导入：按正确名称导入所需组件，不要写错别名
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from '../Pages/Home';
import About from '../Pages/About';
import Contacts from '../Pages/Contacts';
import Blog from '../Pages/Blog';
// 引入你自己的导航栏组件
import Navbar from '../components/Navbar';

export default function App() {
  return (
    <BrowserRouter>
      {/* 全局导航栏放在Routes外层，所有页面都能显示 */}
      <Navbar />
      <Routes>
        {/* 移除v6不需要的exact属性 */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contacts" element={<Contacts />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </BrowserRouter>
  )
}

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