Merge pull request #1324 from almadhoob/routing/hotfix

Improve the dynamic links of categories

Author: w3bdesign

src/components/Category/Categories.component.tsx

@@ -11,9 +11,7 @@ const Categories = ({ categories }: ICategoriesProps) => (
       {categories.map(({ id, name, slug }) => (
         <Link
           key={uuidv4()}
-          as={`/kategori/${slug}?id=${id}`}
-          href="/kategori/[id]"
-          passHref
+          href={`/kategori/${encodeURIComponent(slug)}?id=${encodeURIComponent(id)}`}
         >
           <div className="p-6 cursor-pointer">
             <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">

src/components/Product/DisplayProducts.component.tsx

@@ -48,7 +48,10 @@ interface IDisplayProductsProps {
 
 const DisplayProducts = ({ products }: IDisplayProductsProps) => (
   <section className="container mx-auto bg-white">
-    <div id="product-container" className="flex flex-wrap items-center mb-[120px] md:mb-0">
+    <div
+      id="product-container"
+      className="flex flex-wrap items-center mb-[120px] md:mb-0"
+    >
       {products ? (
         products.map(
           ({
@@ -103,7 +106,6 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                     )}
                   </span>
                 </Link>
-
                 <Link
                   href={`/produkt/${encodeURIComponent(
                     slug,
@@ -132,7 +134,9 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 )}
                 {/* Display regular price when not on sale */}
                 {!onSale && (
-                  <p className="pt-1 text-center text-gray-900 text-xl">{price}</p>
+                  <p className="pt-1 text-center text-gray-900 text-xl">
+                    {price}
+                  </p>
                 )}
               </div>
             );