0

我在这里遗漏了一些非常明显的东西。需要一些帮助来理解使用 Multi Form 的反应路由。我有一个导航差异组件（页面）的多步骤表单。每次单击下一个按钮时，我都使用 history.push 来帮助导航到 diff url，而不是使用 Page 直接呈现组件。这是我的外壳代码。

  function goNextPage() {
    if (page === 1) {
      history.push({
        pathname: "/new-scenario/passenger-demand",
        state: " ",
      });
    }
    if (page === 2) {
      history.push({
        pathname: "/new-scenario/costs",
        state: " ",
      });
    }
    if (page === 3) {
      history.push({
        pathname: "/new-scenario/constraints",
        state: " ",
      });
    }
    if (page === 4) {
      history.push({
        pathname: "/new-scenario/summary",
        state: " ",
      });
    }
    if (page === 5) return;
    setPage((page) => page + 1);
  }


  return (
    <div className="App">
      {/* the progress bar goes here */}
      <div>
        <progress max="5" value={page} />
      </div>
      <div>
        <Switch>
          {page === 1 && (
            <Route path="/new-scenario/overview" exact component={Overview} />
          )}
          {page === 2 && (
            <Route
              path="/new-scenario/passenger-demand"
              exact
              component={PassengerDemand}
            />
          )}
          {page === 3 && (
            <Route path="/new-scenario/costs" exact component={Costs} />
          )}
          {page === 4 && (
            <Route
              path="/new-scenario/constraints"
              exact
              component={Constraints}
            />
          )}
          {page === 5 && (
            <Route path="/new-scenario/summary" exact component={Summary} />
          )}
        </Switch>
      </div>
      {page !== 5 && <button onClick={goNextPage}>Go Next</button>}
      {page === 5 && (
        <button type="submit" onClick={submit}>
          Submit
        </button>
      )}
    </div>
  );

现在我需要一个菜单​​和表单，以便用户能够直接访问任何页面。并非表格中的所有步骤都是必需的。这是我的菜单https://codesandbox.io/s/silly-brook-ecj7e?file=/src/AppMenuItemComponent.tsx 将页面路由到页面

我如何将这两者同步在一起（上面的例子是我的尝试）？多步骤表单与下一步按钮配合良好，但在单击菜单按钮时不会更新。（可以理解，因为它检查页面 === 编号）。在这一点上，我正在考虑完全删除页面检查，而不是让它成为一个多步骤表单。

4

0 回答 0