Entonces, tengo una página con seis etiquetas de Link que deben redirigir a una página con diferentes accesorios según el enlace en el que se haga clic. Así es como estoy pasando accesorios:
<Link href={{ pathname: '/products', query: {category: 'Starters'} }}> <div class="container"> <div class="content"> <div class="content-overlay"></div> <img class="content-image" src="/starters.png" /> <div class="content-details fadeIn-bottom"> <h3 class="content-title text-uppercase">Starters</h3> </div> </div> <h3>Starters</h3> </div> </Link> En la página de products , así es como estoy leyendo estos accesorios:
export default function products(){ const router = useRouter() const {id} = router.query console.log(id) return( <> <Navbar></Navbar> <h1 className="text-center">{id}</h1> <Footer></Footer> </> ) } El problema aquí es que mi valor de id se lee como indefinido o vacío. Necesito tomar este valor, mostrarlo en mi página y luego enviarlo a un punto final de API que luego usará esta cadena para ejecutar una consulta SQL condicional.
¿Alguna idea de por qué obtengo un valor vacío o indefinido y cómo solucionarlo?
Pruebe el componente funcional en su lugar, como se muestra a continuación. Los ganchos se utilizan en componentes funcionales.
import React, { useState } from "react"; const Products = (props) => { const [myId, setMyId] = useState<any>(null); const [myCategory, setMyCategory] = useState<any>(null); useEffect(() => { console.log(props.router.query) setMyId(props.router.query.id) setMyCategory(props.router.query.category) }, [props.router]); return(<h1 className="text-center">{myId}</h1>); }Alternativamente
import React, { useState } from "react"; import router from 'next/router'; const Products = () => { const {id, category} = router.query const [myId, setMyId] = useState<any>(null); const [myCategory, setMyCategory] = useState<any>(null); useEffect(() => { if(!id) { return; } console.log(id); setMyId(id); setMyCategory(category); }, [id]); return(<h1 className="text-center">{myId}</h1>); }¿También puedes modificar un poco tu jsx? Por ejemplo
<Link href={{ pathname: '/products', query: {id: 1, category: 'Starters'} }}> Starters </Link> <div class="container"> <div class="content"> <div class="content-overlay"></div> <img class="content-image" src="/starters.png" /> <div class="content-details fadeIn-bottom"> <h3 class="content-title text-uppercase">Starters</h3> </div> </div> </div>