本文详解 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 的 <Route component={...} /> 和独立 <Route> 写法——这在 v6 中完全无效，且不会报明确错误，而是静默失败，最终导致渲染内容丢失。
✅ 正确的 v6 路由结构：三要素缺一不可
必须包裹在 <Routes> 中
所有 <Route> 必须作为 <Routes> 的直接子元素，就像 v5 中的 <Switch>；单独使用 <Route> 不会被识别。使用 element 替代 component / render / children
element 接收已实例化的 JSX 元素（即带括号的 <Component />），而非组件引用（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 />
<Header />
<Routes>
{/* ✅ 正确写法：element 接收 JSX，路径自动精确匹配 */}
<Route path="/" element={<BookingPage />} />
{/* ? 建议补充其他路由，避免 404 */}
<Route path="/home" element={<BookingPage />} />
<Route path="/about" element={<div>About Page</div>} />
<Route path="*" element={<div>404 — 页面未找到</div>} />
</Routes>
</Router>
);
}
export default App;⚠️ 关键注意事项
-
不要在 element 中直接传参（如 element={<BookingPage someProp={value} />}）
这会导致每次渲染都创建新元素，触发不必要的重渲染。如需传参，推荐使用 useNavigate + state 或 Context；或封装为函数组件再嵌套：<Route path="/booking" element={<BookingPageWrapper />} /> // 然后在 BookingPageWrapper 中返回 <BookingPage someProp={...} /> -
<Nav> 中的 <Link to="/bookingPage"> 需与实际路由路径一致
当前 Nav 使用 to="/bookingPage"，但你的路由是 path="/". 若希望点击“Reservations”跳转到预约页，请统一路径：{/* 在 Nav.js 中修改 Link */} <li><Link to="/">Reservations</Link></li>或新增对应路由：
<Route path="/bookingPage" element={<BookingPage />} /> -
关于 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
- ✅ 升级 react-scripts 至 ^5.0.0（推荐）：
? 总结
| v5 写法（已废弃） | v6 正确写法 | 说明 |
|---|---|---|
| <Route exact path="/" component={App} /> | <Route path="/" element={<App />} /> | exact 移除，component → element |
| <Route path="/user/:id" render={(props) => <User {...props} />} /> | <Route path="/user/:id" element={<User />} /> | v6 中 useParams/useNavigate 替代 render 函数 |
| <Route> 独立使用 | 必须嵌套在 <Routes> 内 | 否则路由不生效 |
完成上述调整后，重启开发服务器（npm start），你的预约页面将正常渲染，导航链接也可正确跳转。牢记：v6 的哲学是“声明式路由 + JSX 优先”，拥抱这一范式，可大幅提升路由逻辑的可读性与可维护性。
