我正在构建的游戏界面具有以下用户流：
用户登陆其中一个游戏URL，例如www.name.com/game1，首先得到介绍屏幕，然后是游戏屏幕，最后是失败或成功屏幕。
我正在尝试找出最佳的方法来实现这个目标。贝娄的代码运行得很好，但我在寻找更优雅和可扩展的解决方案。你有什么想法吗？

import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";

// Import views and components
import Step1 from "../Intro/Step1";
import StatusBar from "../../components/StatusBar/StatusBar";
import Game1 from "./Games/Game1/Game1";
import Game2 from "./Games/Game2/Game2";
import Intro from "./Intro/Intro";
import Password from "./Password/Password";
import Success from "./Success/Success";
import Fail from "./Fail/Fail";
import FailBeginOnStart from "./Fail/FailBeginOnStart";

// Data

function Game() {
  const data = {
    game1: {
      desc: "some description for game 1",
    },
    game2: {
      desc: "some description for game 2",
    },
  };

  // Get global states from redux toolkit
  const showIntro = useSelector((state) => state.game.showIntro);
  const showSuccess = useSelector((state) => state.game.showSuccess);
  const showFail = useSelector((state) => state.game.showFail);
  const showPassword = useSelector((state) => state.game.showPassword);
  const completedGame = useSelector((state) => state.game.completedGame);
  const selectedLanguage = useSelector((state) => state.game.selectedLanguage);

  // Get current param from URL (example /game1)
  const { game } = useParams();

  // Strip slash to get matching game ID (example game1)
  const gameId = game.replace(/-/g, "");

  const GameScreen = () => {

    // show intro screen
    if (showIntro === true) {
      return (
        <>
          <StatusBar />
          <Intro path={game} id={gameId} data={data[gameId]} />
        </>
      );
    }

    // show success screen
    if (showSuccess === true) {
      return (
        <>
          <StatusBar />
          <Success data={data[gameId]} />
        </>
      );
    }

    // show fail screen
    if (showFail === true) {
      return (
        <>
          <StatusBar />
          <Fail data={data[gameId]} />
        </>
      );
    }

    // Show actual game
    switch (true) {
      case game === "game1":
        return <Game1 data={data[gameId]} />;
      case game === "game2":
        return <Game2 data={data[gameId]} />;
      default:
        return <Step1 />;
    }
  };

  return <GameScreen />;
}

export default Game;