我正在开发一个离子应用程序,以前那里有一个可怕的管理和代码真的很难看。
首先,我将解释路径,然后显示代码。
用户应该扫描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>
我不知道我上面所贴的是否足够描述。如果你还需要更多的信息,请让我知道。
如果有人能帮我解决这个问题,我将非常感激。
1条答案
按热度按时间v8wbuo2f1#
您是否尝试过导入useNavigate并使用它?
推送和导航差异的文档:
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.