如何为CYOA游戏动态创建React组件及路由？

核心思路 #

不用为每个房间创建单独的Page组件，而是写一个通用Page组件接收房间ID，从JSON拉取对应数据渲染；再通过遍历JSON数据，自动生成所有路由配置。

步骤1：编写通用Page组件 #

创建一个可复用的Page组件，根据传入的roomId匹配JSON中的数据，渲染页面内容和选项：

// src/components/Page.js
import { useEffect, useState } from 'react';
import gameData from '../data/gameData.json'; // 替换成你的JSON文件路径

const Page = ({ roomId }) => {
  const [room, setRoom] = useState(null);

  useEffect(() => {
    // 根据roomId从JSON中筛选对应房间数据
    const matchedRoom = gameData.find(item => item.id === roomId);
    setRoom(matchedRoom);
  }, [roomId]);

  if (!room) return <div>加载中...</div>;

  return (
    <div className="page">
      <h2>{room.title}</h2>
      <p>{room.content}</p>
      <div className="choices">
        {room.choices.map((choice, idx) => (
          <a key={idx} href={`/${choice.targetRoomId}`}>
            {choice.text}
          </a>
        ))}
      </div>
    </div>
  );
};

export default Page;

步骤2：动态生成路由配置 #

在路由主文件（比如src/App.js）中，遍历JSON数据生成所有Route，替代手动配置：

// src/App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Page from './components/Page';
import gameData from './data/gameData.json';
import NotFound from './components/NotFound'; // 可选的404页面

function App() {
  return (
    <Router>
      <Routes>
        {/* 默认首页：跳转到第一个房间 */}
        <Route path="/" element={<Page roomId={gameData[0].id} />} />
        {/* 遍历JSON自动生成所有房间路由 */}
        {gameData.map(room => (
          <Route
            key={room.id}
            path={`/${room.id}`}
            element={<Page roomId={room.id} />}
          />
        ))}
        {/* 404兜底路由 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

远程API数据的适配方案 #

如果你的游戏数据是从远程API获取，而非本地JSON，只需在路由文件中先拉取数据，再渲染路由：

// src/App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useEffect, useState } from 'react';
import Page from './components/Page';
import NotFound from './components/NotFound';

function App() {
  const [gameData, setGameData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 替换成你的API地址
    fetch('https://your-api-url/game-data')
      .then(res => res.json())
      .then(data => {
        setGameData(data);
        setIsLoading(false);
      })
      .catch(err => console.error('加载游戏数据失败：', err));
  }, []);

  if (isLoading) return <div>加载游戏数据中...</div>;

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Page roomId={gameData[0].id} />} />
        {gameData.map(room => (
          <Route
            key={room.id}
            path={`/${room.id}`}
            element={<Page roomId={room.id} />}
          />
        ))}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

注意事项 #

• 确保JSON中每个房间的id唯一，避免路由冲突
• 选项跳转的targetRoomId必须与目标房间的id完全匹配
• 若需要给不同房间加特殊样式，可在通用Page组件中根据roomId添加不同的className，实现差异化渲染

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