本文详解如何将 React Router v5 语法正确升级至 v6，解决因 Route 使用不当导致的页面空白、路由失效及构建报错问题，并提供完整可运行的代码示例。
本文详解如何将 react router v5 语法正确升级至 v6，解决因 `route` 使用不当导致的页面空白、路由失效及构建报错问题，并提供完整可运行的代码示例。
React Router v6 是一次重大重构，其设计理念更强调声明式路由和嵌套布局，但这也意味着 v5 的写法（如 exact、component、render）在 v6 中完全不可用。你当前项目中出现的“页面变空白”并非逻辑错误，而是由于
此外，v6 废除了 component 属性，统一使用 element 属性接收已实例化的 JSX 元素（注意：不是组件引用！）。这意味着你不能再写 component={BookingPage}，而必须写 element={
以下是修正后的 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><route path="/" element="{<BookingPage"></route>} />
{/* 可扩展其他路由 */}
<route path="/about" element="{<div">About Page} />
<route path="/menu" element="{<div">Menu Page} />
</route></route></routes></router>
);
}
export default App;
⚠️ 关键注意事项：
- ✅ 必须导入并使用
作为所有 的父容器； - ✅ path 匹配默认为精确匹配（即 v5 的 exact 已移除，无需再写）；
- ✅ element 接收的是 JSX 元素（带括号），不是组件函数名；
- ❌ 不支持 component、render、children 函数等 v5 属性；
- ❌
不能作为
同时，请检查你的
<route path="/bookingPage" element="{<BookingPage"></route>} />
或更推荐采用语义化路径（如 /reservations），并在 Nav 中同步更新 to 值。
最后，关于控制台报出的 ERR_OSSL_EVP_UNSUPPORTED 错误：这是 Node.js 17+ 版本中 OpenSSL 策略变更引发的 Webpack 兼容性问题，与 React Router 无关，但常在升级依赖后首次启动时出现。临时解决方案是在启动命令前设置环境变量：
# Windows (PowerShell) $env:NODE_OPTIONS="--openssl-legacy-provider"; npm start # macOS / Linux NODE_OPTIONS=--openssl-legacy-provider npm start
长期建议将 react-scripts 升级至 5.x（当前项目使用的是较旧的 3.0.1），以获得对新版 Node.js 的原生支持。可通过 npm install react-scripts@latest 更新，并检查 package.json 中 react-router-dom 是否为最新稳定版（如 6.23.0+）。
完成以上修改后，路由即可正常工作，页面不再空白，且符合 React Router v6 最佳实践。
