CODEWITHSUNDEEP
reactjsnext.jspathslugsanity
paparonnie
paparonnie

Reputation: 170

Navigating to the wrong slug - but no error? Path issue?

I have two slugs. I want to access the second one [product] but it keeps directing me to the first one instead [slug]. I have them in separate folders, I'm not getting any error messages. It just keeps redirecting to the first slug and not the second slug for some reason. Using Sanity as my backend and Nextjs as my frontend.

I'm trying to do this from my shop.js file:

import React from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';

const Shop = ({getProduct}) => {
  return (
    <div>
      <Header />
      <main className="main-shop">
            <div className="title">
                <div className="title-line-left"></div>
                <h2>for sale</h2>
                <div className="title-line-right"></div>
            </div>
            <div className="shop">
              <ul className="products">
                {getProduct && getProduct.map((getProduct, index) => (
                  <Link href={`/${getProduct.slug.current}`}>
                    <li key={index}>
                      <a href="./products/[product].js"><img src={urlFor(getProduct.productImage).auto('format').url()} alt={getProduct.productName}/></a>
                      <span className="product-name">{getProduct.productName}</span>
                      <span className="product-price">${getProduct.price}.00</span>
                    </li>
                  </Link>
                ))}
              </ul>
          </div>
      </main>
      <Footer />
    </div>
  )
}

export default Shop

export const getServerSideProps = async (pageContext) => {
  const productQuery = `*[_type == 'products']{productName, slug, price, productImage}`;
  const getProduct = await client.fetch(productQuery);

  return {
    props: {getProduct}
  }
}

enter image description here

Upvotes: 0

Views: 228

Answers (1)

jolo
jolo

Reputation: 660

It hard to judge your issue because I dont know what your getProduct array looks like, but consider the following example as inspiration.

import React from "react";
import Link from "next/link";

const ProductOverview = () => {
  const products = [
    { name: "Not rot", slug: "not-rot", price: 10 },
    { name: "T-shirt", slug: "tshirt", price: 28 },
    { name: "Coffee mug", slug: "coffee-mug", price: 4 },
  ];

  return (
    <div>
      {products.map((product, index) => (
        <Link href={`/products/${product.slug}`} key={index]>
          <h4>{product.name}</h4>
          <p>{product.price}</p>
        </Link>
      ))}
    </div>
  );
};

export default ProductOverview;

this produces the following three links:

  • /products/not-rot
  • /products/tshirt
  • /products/coffee-mug

Your file [product].js in /products catches anything that is posted to /products/{anything} and will display the that page. Getting the data and content linked to that page is another challenge tho.

Upvotes: 1

Related Questions