Question

我即将使用 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 像我想要的那样更新，返回功能也在工作。但页面转换仍在发生。

我做错了什么？？

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

0 个答案: