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