React Router路由失效+启动报错：餐厅预订页面空白求助

一、ERR_OSSL_EVP_UNSUPPORTED启动错误解决 #

该错误是Node.js v17+默认启用OpenSSL 3.0后，部分旧依赖的加密算法不兼容导致的，可通过以下方式解决：

• 修改package.json的启动脚本，添加兼容参数：

  "scripts": {
    "start": "react-scripts start --openssl-legacy-provider",
    "build": "react-scripts build --openssl-legacy-provider",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• 用nvm等工具临时降级Node.js到v16.x版本
• 若手动配置webpack，可在webpack.config.js中添加node: { crypto: true }（create-react-app需eject后修改）

二、React Router添加后页面空白问题排查 #

页面空白多因路由配置错误导致组件未渲染，按以下步骤逐一排查：

1. 检查App组件的路由基础结构 #

确保用BrowserRouter（或HashRouter）包裹所有路由内容，且使用React Router v6+的正确语法：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Nav from './Nav';
import BookingPage from './BookingPage';
import Home from './Home';

function App() {
  return (
    <Router>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </Router>
  );
}

export default App;

• 遗漏Router包裹是最常见的空白原因
• 注意v6+版本用Routes替代旧版Switch，通过element属性传入组件

2. 确认组件导出正确 #

检查BookingPage、BookingForm是否为默认导出，或在路由中正确使用命名导出：

// BookingPage示例
import BookingForm from './BookingForm';

function BookingPage() {
  return (
    <div className="booking-page">
      <h1>预订餐桌</h1>
      <BookingForm />
    </div>
  );
}

export default BookingPage;

3. 检查Nav组件的路由跳转 #

确保使用react-router-dom的Link组件而非普通<a>标签，避免页面强制刷新：

import { Link } from 'react-router-dom';

function Nav() {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/booking">预订餐桌</Link>
    </nav>
  );
}

export default Nav;

4. 验证路由路径匹配 #

确认访问的URL与路由path完全一致，避免路径冲突（如多个路由使用相同path）

5. 查看控制台错误 #

打开浏览器开发者工具Console面板，排查是否存在组件渲染错误（如未定义变量、导入失败），这类错误会直接导致组件无法渲染，引发页面空白

内容的提问来源于stack exchange，提问作者Nacho Eigu