本文详解 React Router v6 中 Route 组件的正确用法：必须嵌套在 <Routes> 内，使用 element（而非 component）传入 JSX，且移除已废弃的 exact 属性，避免因语法不兼容导致页面白屏。
本文详解 react router v6 中 `route` 组件的正确用法：必须嵌套在 `
React Router 从 v5 升级到 v6 后，路由 API 发生了重大变更。你当前代码中使用的 <Route component={...} exact /> 是 v5 的写法，而项目依赖的是 v6（"react-router-dom": "^6.16.0"），这直接导致组件无法渲染——不是逻辑错误，而是语法不兼容，最终表现为整个页面空白。
✅ 正确的 v6 路由结构
v6 要求所有 <Route> 必须包裹在 <Routes> 组件内（替代 v5 的 <Switch>），且 Route 不再接受 component、render 或 children 函数，统一使用 element 属性传入已实例化的 JSX 元素（注意：是 <BookingPage />，不是 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 />
<Header />
<Routes> {/* ✅ 必须包裹所有 Route */}
<Route path="/" element={<BookingPage />} /> {/* ✅ 使用 element，无 exact */}
{/* 可扩展其他路由，如： */}
{/* <Route path="/about" element={<AboutPage />} /> */}
</Routes>
</Router>
);
}
export default App;⚠️ 关键注意事项
- element 必须是 JSX 元素：写成 <BookingPage />（带括号），而非 BookingPage（组件引用）或 {BookingPage}（无效对象）。
- 路径匹配默认精确：v6 中 path="/" 自动等效于 v5 的 exact，无需额外声明。
- <Routes> 是必需容器：单独的 <Route> 在 v6 中不会被识别，将被忽略，导致空白页。
- 确保 Nav 中的链接路径与路由一致：你当前 Link to="/bookingPage" 指向 /bookingPage，但主路由只配了 /。若需通过 /bookingPage 访问，应同步更新路由配置：
<Route path="/bookingPage" element={<BookingPage />} />并确保 BookingPage 组件能独立渲染（目前它无问题，但需确认 URL 匹配）。
? 补充说明：关于 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；
- 将 <Route> 嵌套进 <Routes>；
- 将 component={BookingPage} 改为 element={<BookingPage />}，并删除 exact。
完成上述修改后，路由即可正常工作，BookingPage 将按路径准确渲染。务必同步检查 Nav 链接路径与路由配置的一致性，并尽快升级 react-scripts 以彻底解决构建报错。
