如何让React应用在SCORM中正常使用BrowserRouter实现导航？

核心原因 #

本地使用BrowserRouter正常是因为浏览器直接访问根路径，但SCORM Cloud会将应用嵌套在iframe中，资源路径并非根目录，HTML5 History模式的路由会和SCORM的路径规则冲突，同时打包后的资源路径可能不正确导致加载失败。

解决方案 #

1. 替换路由模式为HashRouter #

将BrowserRouter换成HashRouter，路由通过URL中的#标识，避免和SCORM的路径系统冲突：
修改你的App.js（或路由入口文件）：

import './App.css';
import Home from './components/Home';
import { Routes, Route, HashRouter } from 'react-router-dom'; // 导入HashRouter
import Feature from './components/Feature';

function App() {
  return (
    <HashRouter> {/* 用HashRouter包裹路由 */}
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/feature" element={<Feature />} />
        </Routes>
      </div>
    </HashRouter>
  );
}
export default App;

2. 设置React打包的相对路径 #

确保打包后的资源使用相对路径，避免在SCORM环境下找不到文件：

• 若使用Create React App，在package.json中添加：

  "homepage": "."
  

• 重新执行npm run build生成打包文件。

3. 检查imsmanifest.xml的资源配置 #

确保imsmanifest.xml中所有打包后的资源路径正确：

• 删除重复的文件条目（比如你的manifest里同时添加了audio/1.mp3和static/media/1.xxx.mp3，保留实际存在的文件即可）
• 确认resource的href指向正确的index.html，且所有打包生成的文件都被包含在<file>标签中。

4. 验证SCORM初始化（可选） #

若页面仍空白，检查是否正确初始化SCORM API：在入口文件（如index.js）中添加SCORM初始化代码（以SCORM 1.2为例）：

// SCORM 1.2初始化示例
function initSCORM() {
  const api = window.API || window.parent.API || window.top.API;
  if (api) {
    api.LMSInitialize('');
    // 可按需添加设置完成状态等逻辑
  }
}

// 在应用加载完成后执行初始化
window.addEventListener('load', initSCORM);

重新打包测试 #

1. 按上述修改后重新打包React应用
2. 用simple-scorm-packager重新生成SCORM包
3. 上传到SCORM Cloud测试

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