754 viewsNext Amazona

TypeError: Cannot destructure property ‘slug’ of ‘query’ as it is undefined.

[apcode language=”jscript”]

import { useRouter } from "next/router";
import React from "react";
import Layout from "../../components/Layout";
import { data } from "../../utils/data";
 const ProductScreen = () => {
  const { query } = useRouter;
  const { slug } = query;
  const product = data.products.find((x) => x.slug === slug);
  if (!product) {
    return <div>Product Not Found</div>;
  }
  return (
    <Layout title={product.name}>
      <h1>{product.name}</h1>
    </Layout>
  );
};
 export default ProductScreen;

[/apcode]

Sam Mbende Asked question October 18, 2022

Change Line 6 to this:

const { query } = useRouter();

Bassir Posted new comment October 26, 2022