本文详解如何将 React Router v5 语法正确升级至 v6，解决因 Route 使用不当导致的页面空白、路由失效及构建报错问题，并提供完整可运行的代码示例。
本文详解如何将 react router v5 语法正确升级至 v6，解决因 `route` 使用不当导致的页面空白、路由失效及构建报错问题，并提供完整可运行的代码示例。
React Router v6 是一次重大重构，其设计理念更强调声明式路由和嵌套布局，但这也意味着 v5 的写法（如 exact、component、render）在 v6 中完全不可用。你当前项目中出现的“页面变空白”并非逻辑错误，而是由于 <Route> 被直接置于 <Router> 下且未包裹在 <Routes> 中——v6 要求所有 <Route> 必须作为 <Routes> 的直接子元素，否则组件不会被渲染，最终导致白屏。
此外，v6 废除了 component 属性，统一使用 element 属性接收已实例化的 JSX 元素（注意：不是组件引用！）。这意味着你不能再写 component={BookingPage}，而必须写 element={<BookingPage />}。若需向路由组件传参，应使用 element 内联方式或配合 useParams/useNavigate 等 Hooks 实现。
以下是修正后的 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 />
<Header />
<Routes>
<Route path="/" element={<BookingPage />} />
{/* 可扩展其他路由 */}
<Route path="/about" element={<div>About Page</div>} />
<Route path="/menu" element={<div>Menu Page</div>} />
</Routes>
</Router>
);
}
export default App;⚠️ 关键注意事项：
- ✅ 必须导入并使用 <Routes> 作为所有 <Route> 的父容器；
- ✅ path 匹配默认为精确匹配（即 v5 的 exact 已移除，无需再写）；
- ✅ element 接收的是 JSX 元素（带括号），不是组件函数名；
- ❌ 不支持 component、render、children 函数等 v5 属性；
- ❌ <Route> 不能作为 <Nav> 或 <Header> 的兄弟节点直接放在 <Router> 下——必须嵌套在 <Routes> 内。
同时，请检查你的 <Nav> 组件中链接路径是否与定义的路由一致。例如，<Link to="/bookingPage">Reservations</Link> 指向 /bookingPage，但你的 App.js 中只配置了 path="/"。若希望点击“Reservations”跳转到预约页，应将路由改为：
<Route path="/bookingPage" element={<BookingPage />} />或更推荐采用语义化路径（如 /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 最佳实践。
