如何添加具有相同动态路由的3条路由(React，useParams)

Question

我需要帮助解决这个路由问题在我的创建-反应-应用程序。我有三个组件共享相同的路由('/games/:gameId/task/:taskNumber/page/:pageNumber).

对于路由，交换机路由可以工作，但它之前的条件不能工作。没有错误。我想知道怎么修好它。

TaskPage.js

 const TaskPage = () => {
  const { gameId, taskNumber, pageNumber } = useParams();

  if (taskNumber === "5" && pageNumber === "3") {
    return (
      <EndGame
        gameId={gameId}
        taskNumber={taskNumber}
        pageNumber={pageNumber}
      />
    );
  }
  switch (pageNumber) {
    case "0":
      return (
        <StartGame
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );
    case "1":
      return (
        <StartTask
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    case "2":
      return (
        <DuringTask
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    case "3":
      return (
        <EndTask
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    default:
      return null;
  }
};

Answer 1

在尝试有条件地呈现UI时，JSX并不完全是这样；if语句在JSX中无效。我的建议是有条件地通过一个pageNumber语句返回switch值所需的页面组件。

const TaskPage = () => {
  const { gameId, taskNumber, pageNumber } = useParams();

  switch (pageNumber) {
    case "1":
      return (
        <Tasks
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    case "2":
      return (
        <StartGame
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    case "3":
      return (
        <EndGame
          gameId={gameId}
          taskNumber={taskNumber}
          pageNumber={pageNumber}
        />
      );

    default:
      return null;
  }
};