React Vite如何实现页面跳转？使用react-router-dom后页面空白问题

核心排查与修复步骤 #

1. 确认react-router-dom版本匹配 #

执行npm list react-router-dom查看版本，v6和v5的路由写法差异极大，误用会直接导致页面空白。当前主流是v6，以下示例均基于v6。

2. 确保路由结构配置正确 #

App.jsx必须用<BrowserRouter>包裹整个应用，路由规则通过<Routes>和<Route>定义，示例代码如下：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Patrocinio from './patrocinio'; // 注意组件路径正确性

function App() {
  return (
    <Router>
      {/* 导航栏 */}
      <nav>
        <Link to="/patrocinio">前往Patrocinio页面</Link>
      </nav>
      {/* 路由配置 */}
      <Routes>
        <Route path="/patrocinio" element={<Patrocinio />} />
        <Route path="/" element={<div>首页内容</div>} />
      </Routes>
    </Router>
  );
}

export default App;

3. 检查组件导入路径 #

确认patrocinio.jsx的导入路径无误，同目录下用./patrocinio或./patrocinio.jsx，路径错误会导致组件加载失败。

4. 排查Patrocinio组件自身问题 #

打开浏览器控制台（F12）查看报错信息：

• 确认组件是否正确导出（export default Patrocinio;）
• 检查组件内是否有未闭合标签、语法错误或渲染异常逻辑

5. 重启开发服务器 #

安装react-router-dom后，必须重启npm start或对应的开发服务，否则依赖无法生效。

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