离子路由替换没有页面动画的 URL

如何解决离子路由替换没有页面动画的 URL

我即将使用 ionic-react 和 @ionic-react-router 设置产品页面。 产品有不同的变体，所以我创建了一个可选的 url 参数来启用平滑共享。

我的路线定义如下：

product: {
    component: ProductPage,background: '/images/dashboard-navigation-productOverview.png',key: 'PRODUCT',path: '/product/:id/:variantId?'
},

我的 ProductPage 组件如下所示：

import React,{ useEffect,useState } from 'react';
import { useSelector } from 'react-redux';
import { IonPage,IonContent } from '@ionic/react';
....

const ProductPage = ({match}) => {
    const [variants,setvariants] = useState([]);
    const [source,setSource] = useState(null);
    const [variant,setvariant] = useState(null);

    useEffect(() => {
        (async () => {
            const response = await productService.getProduct(parseInt(match.params.id,10))
            setSource(response);
        })();
    },[match.params.id]);

    useEffect(() => {
        const variants = productHelpers.allVariantsFromSource(source);

        if (match.params.variantId) {
            const variant = productHelpers.getProductvariationById(variants,parseInt(match.params.variantId,10));
            setvariant(variant || variants[0]);
        } else {
            // 0 is always main detail
            setvariant(variants[0]);
        }

        setvariants(variants);
    },[source,match.params.variantId]);

    return <IonPage>
        <Toolbar title={(source) ? source.name : ''}/>
        <IonContent>
            <Product source={source} variant={variant} variants={variants}/>
        </IonContent>
    </IonPage>
}

export default ProductPage;

在产品的某个地方，我想通过替换 url 来更改变体。 因此用户可以使用后退按钮返回他来自哪里（主要是产品列表）。

import React,{useContext} from "react";
import {IonButton,NavContext} from '@ionic/react';

const Productvariant = ({source,newVariant}) => {
    const {navigate} = useContext(NavContext);


    return (
        <IonButton
           onClick={() => navigate(`/product/${source.id}/${newVariant.id}`,'none','replace')}>{newVariant.name}</IonButton>

    );
};

我的问题

页面 URL 像我想要的那样更新，返回功能也在工作。 但页面转换仍在发生。

我做错了什么？？