0
337
ViewsNext.js anteponiendo la ruta actual para rutas dinámicas anidadas en componentes de enlace
¿Cómo haría para lidiar con rutas dinámicas anidadas y usar el componente Next.js Link?
Digamos que tengo 2 rutas de archivo:
/pages/projects/index.js <Link href={`/projects/${project.id}`} key={index}> <a>Project Name</a> </Link> Esto me llevará a localhost:3000/projects/some-id/
y
/pages/projects/[pid]/index.js Aquí es donde tengo problemas para descubrir cómo anteponer la ruta de localhost:3000/projects/some-id/
<Link href={`/${router.pathname}/apple`}> <a>Business name</a> </Link> Si uso router.pathname , obtengo /projects/[pid]/apple , y falta el nombre de dominio, si uso router.asPath , obtengo la ruta correcta, pero aún falta el dominio. No sé si esta es la forma correcta, porque no debería agregar el nombre de dominio en el href de Link.
·
Juan Pablo Isaza
1 answers
Answer question0
Para una ruta dinámica anidada en Nextjs, puede configurar su proyecto así:
Comenzando con un enlace simple en index.js
import Link from 'next/link'; export default function Index() { return ( <section> <h2>Index</h2> <Link href="/projectA"> <a>Project A</a> </Link> </section> ); } Una vez que esté en [projectId].js use useRouter para obtener el parámetro actual y agregarlo a su próxima ruta
import Link from 'next/link'; import { useRouter } from 'next/router'; export default function Project() { const router = useRouter(); const { projectId } = router.query; return ( <section> <Link href={`/${projectId}/2`}> <a>Project 2</a> </Link> </section> ); }
·
Juan Pablo Isaza
Report
Answer question