Question

我需要帮助在我的 create-react-app 中解决这个路由问题。我得到了三个共享相同路由的组件（'/games/:gameId/task/:taskNumber/page/:pageNumber）。

对于路由，交换机路由有效，但之前的条件无效。没有错误。我想知道如何修复它。

TaskPage.js

2021/02/15 00:33:06 Request error from Stripe (status 404): {"status":404,"message":"Unrecognized request URL (GET: /v1/issuing/cards/ic_redacted/details). Please see https://stripe.com/docs

Answer 1

JSX 在尝试有条件地呈现 UI 时不太适合这种方式； 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;
  }
};

如何添加具有相同动态路由的 3 条路由（React、useParams）

1 个答案: