React Router v6 路由配置错误导致页面空白的完整修复指南-js教程-PHP中文网

本文详解 React Router v6 中 Route 组件的正确用法：必须嵌套在内，使用 element（而非 component）传入 JSX，且移除已废弃的 exact 属性，避免因语法不兼容导致页面白屏。

本文详解 react router v6 中 `route` 组件的正确用法：必须嵌套在 `` 内，使用 `element`（而非 `component`）传入 jsx，且移除已废弃的 `exact` 属性，避免因语法不兼容导致页面白屏。

React Router 从 v5 升级到 v6 后，路由 API 发生了重大变更。你当前代码中使用的是 v5 的写法，而项目依赖的是 v6（"react-router-dom": "^6.16.0"），这直接导致组件无法渲染——不是逻辑错误，而是语法不兼容，最终表现为整个页面空白。

✅ 正确的 v6 路由结构

v6 要求所有必须包裹在组件内（替代 v5 的），且 Route 不再接受 component、render 或 children 函数，统一使用 element 属性传入已实例化的 JSX 元素（注意：是，不是 BookingPage）：

import React from 'react';
import Nav from './Nav';
import './App.css';
import Header from './Header';
import BookingPage from './bookingPage';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // ✅ 新增 Routes 导入

function App() {
  return (
    <router><nav></nav><header></header><routes> {/* ✅ 必须包裹所有 Route */}
        <route path="/" element="{<BookingPage"></route>} /> {/* ✅ 使用 element，无 exact */}
        {/* 可扩展其他路由，如： */}
        {/* <route path="/about" element="{<AboutPage"></route>} /> */}
      </routes></router>
  );
}

export default App;

⚠️ 关键注意事项

element 必须是 JSX 元素：写成（带括号），而非 BookingPage（组件引用）或 {BookingPage}（无效对象）。
路径匹配默认精确：v6 中 path="/" 自动等效于 v5 的 exact，无需额外声明。
是必需容器：单独的在 v6 中不会被识别，将被忽略，导致空白页。
确保 Nav 中的链接路径与路由一致：你当前 Link to="/bookingPage" 指向 /bookingPage，但主路由只配了 /。若需通过 /bookingPage 访问，应同步更新路由配置：

<route path="/bookingPage" element="{<BookingPage"></route>} />

并确保 BookingPage 组件能独立渲染（目前它无问题，但需确认 URL 匹配）。

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

? 补充说明：关于 Node.js 加密错误（ERR_OSSL_EVP_UNSUPPORTED）

你日志末尾的 ERR_OSSL_EVP_UNSUPPORTED 错误与 React Router 无关，而是 Node.js 版本（≥17）默认启用 OpenSSL 3.0 后，Webpack 4（由旧版 react-scripts@3.0.1 使用）调用过时哈希算法引发的兼容性问题。这不是路由问题，但会阻止开发服务器启动。解决方案（二选一）：

✅ 推荐：升级 react-scripts 至 v5+（支持 Webpack 5）：
```
npm install react-scripts@latest
```

⚠️ 临时降级 Node.js 至 v16.x（LTS），或设置环境变量（仅开发阶段）：

# Windows PowerShell
$env:NODE_OPTIONS="--openssl-legacy-provider"
# macOS/Linux
export NODE_OPTIONS=--openssl-legacy-provider

✅ 总结

修复白屏的核心步骤只有三步：

在 App.js 中导入 Routes；
将嵌套进；
将 component={BookingPage} 改为 element={}，并删除 exact。

完成上述修改后，路由即可正常工作，BookingPage 将按路径准确渲染。务必同步检查 Nav 链接路径与路由配置的一致性，并尽快升级 react-scripts 以彻底解决构建报错。