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

Question

我正在做一个IONIC应用程序，以前有一个糟糕的管理，代码真的很丑。

首先我将解释路径，然后显示代码。

用户应该扫描二维码。如果响应成功，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} />
</>
);

最后，这里是approouter。(我只添加了与本主题最相关的内容)

<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>

我不知道我上面发布的内容是否足够描述。如果您还需要更多的信息，请告诉我。

如果有人能帮我解决这个问题，我将非常感激。

Answer 1

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

import {useNavigate} from 'react-router-dom'
const navigate = useNavigate();
navigate("/self-assign");

push和navigate的区别文档:

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.