fix: wrap router.replace in useEffect hook

This commit is contained in:
Victor Gerbrands 2023-05-04 11:43:27 +02:00
parent a46f39bd4c
commit 99d93093c7

View File

@ -5,6 +5,7 @@ import { ProductOption, ProductVariant } from 'lib/medusa/types';
import { createUrl } from 'lib/utils';
import Link from 'next/link';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
type ParamsMap = {
[key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
@ -79,9 +80,11 @@ export function VariantSelector({
const currentUrl = createUrl(pathname, currentParams);
const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
if (currentUrl !== selectedVariantUrl) {
router.replace(selectedVariantUrl);
}
useEffect(() => {
if (currentUrl !== selectedVariantUrl) {
router.replace(selectedVariantUrl);
}
}, [currentUrl, router, selectedVariantUrl]);
return options.map((option) => (
<dl className="mb-8" key={option.id}>