如何在 Next JS 中使用 useRouter 将道具从一个页面传递到另一个页面

时间:2021-02-28 17:19:50

标签: reactjs next.js

我有两个页面,一个是购物车页面,另一个是订单摘要页面,当我点击购物车页面中的继续结帐按钮时,它应该转到订单摘要页面,其中包含所有信息,例如 userAddress 信息和 productInfo 和couponInfo 所有详细信息按顺序汇总页面。 我怎样才能做到这一点 。 我尝试使用带有查询参数的 router.push 但它在 url 中添加了所有对象信息,我不想这样做,因为我有很多信息

router.push({
                pathname: '/order-summary',
                query: { name: 'Someone' }
            })

我想在订单摘要页面中传递这些信息

 <OrderSummary productIdWithCount={productIdWithCount} promoCode={promoCode}
                          shipToDetails={shipToDetails}
                          promoAmount={promoAmount}
                          storeData={packageProductByStores}
                          bulkStoreData={bulkProductByStores}
                          grandAmount={productApiResponse !== undefined ? productApiResponse.grand_amount - promoAmount : 0}
                          fulFillmentChargesOCM={checkEcoProductCount()}/>

这里是handleLoginCheckout函数

const handleLoginCheckout = () => {
        if (selector.user.user !== undefined && Object.keys(selector.user.user).length > 0) {
            // if user is already login then show cart summary modal and take payment
           /* router.push({
                pathname: '/order-summary',
                query: { name: 'Someone' },
                state: { pattern: 'hello' }
            })*/


           
            <OrderSummary productIdWithCount={productIdWithCount} promoCode={promoCode}
                          shipToDetails={shipToDetails}
                          promoAmount={promoAmount}
                          storeData={packageProductByStores}
                          bulkStoreData={bulkProductByStores}
                          grandAmount={productApiResponse !== undefined ? productApiResponse.grand_amount - promoAmount : 0}
                          fulFillmentChargesOCM={checkEcoProductCount()}/>

                          router.push('/order-summary')}

0 个答案:

没有答案