Ionic 从一个页面导航到另一个页面后出现问题

xbp102n0  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(286)

我正在开发一个离子应用程序,以前那里有一个可怕的管理和代码真的很难看。
首先,我将解释路径,然后显示代码。
用户应该扫描QR。如果响应成功,APP应该将用户重定向到另一个页面,在那里将显示对先前显示的QR码的确认。我在这里发现的问题是,应该重定向的页面直接呈现在主页后面。URL被更新显示正确的路径。
下面是代码片段:

QRModal确认应进入下一页。

const handleConfirm = async () => {
const containerList: any = [];
try {
  containers.map((container) => {
    containerList.push(container.id);
  });
  const response = await logisticsApi.selfAssign(containerList);

  if (response.success) {
    updateIsContainerScan(false);
    setLendConfig(containers);
    navigate.push('/self-assign');
    onDismiss();
    toaster.flashSuccess(t('SuccessfullyAdded'));
  } else {
    toaster.flashError(t('GeneralError'));
    onDismiss();
  }
  return;
} catch (error) {
  updateScanning(true);
  toaster.flashError(t('GeneralError'));
}

};

这是成功扫描后将显示的组件。

const ConfirmationSelfAssign = ({ lendConfig }: ConfirmationModalProps) => {
  console.log(lendConfig, 'confirmation');
  const [showAlert1, setShowAlert1] = useState(false);

  const { t } = useTranslation();
  return (
    <>
      <Placeholder
        selfAssignConfirmation
        icon="assets/confirmationTick.svg"
        title={t('SelfAssignConfirmation', { total: lendConfig.length })}
      />
      <Cart confirmationModal key={lendConfig} items={lendConfig} />
      <Button onClick={() => setShowAlert1(true)} primary>
        Cerrar
      </Button>
      <ConfirmationAlert showAlert={showAlert1} />
    </>
  );

最后是AppRouter。(我只添加了与本主题最相关的部分)

<Suspense fallback={() => <Loading />}>
      <IonReactRouter>
        <LastLocationProvider>
          <LinkListener />
          <IonRouterOutlet>
            <PublicRoute path="/" component={Pages.Splash} exact />
            <PrivateRoute as="customer" path="/customer" component={Pages.Home} exact />
            <PrivateRoute
              as="customer"
              path="/self-assign"
              component={Pages.ConfirmationSelfAssign}
              exact
            />
          </IonRouterOutlet>
        </LastLocationProvider>
      </IonReactRouter>
    </Suspense>

我不知道我上面所贴的是否足够描述。如果你还需要更多的信息,请让我知道。
如果有人能帮我解决这个问题,我将非常感激。

v8wbuo2f

v8wbuo2f1#

您是否尝试过导入useNavigate并使用它?

import {useNavigate} from 'react-router-dom'

const navigate = useNavigate();

navigate("/self-assign");

推送和导航差异的文档:
The Push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back to earlier in the stack if a component is already mounted there. Push will always add on top, so a component can be mounted multiple times.

相关问题