本文详解 React Router v6 的核心变更，包括 Routes 组件的必要性、element 替代 component 的写法、以及如何正确嵌套路由结构，帮助你快速修复因版本不匹配导致的页面空白和运行错误。
本文详解 react router v6 的核心变更，包括 `routes` 组件的必要性、`element` 替代 `component` 的写法、以及如何正确嵌套路由结构，帮助你快速修复因版本不匹配导致的页面空白和运行错误。
React Router v6 与 v5 在 API 设计上存在重大不兼容变更，这是你项目中页面变为空白的根本原因。你当前使用的是 react-router-dom@6.16.0（v6），但代码仍沿用 v5 的
✅ 正确的 v6 路由结构：三要素缺一不可
必须包裹在
中
所有必须作为 的直接子元素，就像 v5 中的 ；单独使用 不会被识别。 使用 element 替代 component / render / children
element 接收已实例化的 JSX 元素（即带括号的），而非组件引用（Component）。它支持内联 props 传递（需注意闭包与重渲染风险）。 移除 exact 属性
v6 默认采用精确匹配（exact match），路径 / 只匹配根路径，/about 不会误匹配 /about-us，无需 exact。
以下是修正后的 App.js：
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';
function App() {
return (
<router><nav></nav><header></header><routes>
{/* ✅ 正确写法：element 接收 JSX，路径自动精确匹配 */}
<route path="/" element="{<BookingPage"></route>} />
{/* ? 建议补充其他路由，避免 404 */}
<route path="/home" element="{<BookingPage"></route>} />
<route path="/about" element="{<div">About Page} />
<route path="*" element="{<div">404 — 页面未找到} />
</route></route></routes></router>
);
}
export default App;
⚠️ 关键注意事项
-
不要在 element 中直接传参（如 element={
}）
这会导致每次渲染都创建新元素，触发不必要的重渲染。如需传参，推荐使用 useNavigate + state 或 Context；或封装为函数组件再嵌套：<route path="/booking" element="{<BookingPageWrapper"></route>} /> // 然后在 BookingPageWrapper 中返回 <bookingpage someprop="{...}"></bookingpage> -
当前 Nav 使用 to="/bookingPage"，但你的路由是 path="/". 若希望点击“Reservations”跳转到预约页，请统一路径：{/* 在 Nav.js 中修改 Link */} - Reservations
或新增对应路由：
<route path="/bookingPage" element="{<BookingPage"></route>} />
关于 Node.js 报错 ERR_OSSL_EVP_UNSUPPORTED
此错误与 React Router 无关，而是因 Node.js 17+ 默认禁用旧版 OpenSSL 加密算法所致（常见于 react-scripts@3.x）。解决方案（任选其一）：
- ✅ 升级 react-scripts 至 ^5.0.0（推荐）：
npm install react-scripts@latest
- ⚠️ 临时降级 Node.js 至 16.x（LTS 版本）
- ? 或设置环境变量（仅开发环境）：
# Windows PowerShell $env:NODE_OPTIONS = "--openssl-legacy-provider" npm start
? 总结
| v5 写法（已废弃） | v6 正确写法 | 说明 |
|---|---|---|
|
|
exact 移除，component → element | |
|
|
v6 中 useParams/useNavigate 替代 render 函数 | |
| 必须嵌套在 |
否则路由不生效 |
完成上述调整后，重启开发服务器（npm start），你的预约页面将正常渲染，导航链接也可正确跳转。牢记：v6 的哲学是“声明式路由 + JSX 优先”，拥抱这一范式，可大幅提升路由逻辑的可读性与可维护性。
