0
328
VistasNext.js prepending current path for nested dynamic routes in Link components
How would you go about dealing with nested dynamic routes and using Next.js Link component?
Say I have 2 file paths:
/pages/projects/index.js
<Link href={`/projects/${project.id}`} key={index}>
<a>Project Name</a>
</Link>
This will take me to localhost:3000/projects/some-id/
and
/pages/projects/[pid]/index.js
This is where I'm having trouble figuring out how to prepend the path of localhost:3000/projects/some-id/
<Link href={`/${router.pathname}/apple`}>
<a>Business name</a>
</Link>
If I use router.pathname, I get /projects/[pid]/apple, and its missing the domain name, if I use router.asPath, I get the correct path, but its still missing the domain. I don't know if this is the correct way, because i shouldn't be adding the domain name into Link's href.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
For a nested dynamic route in Nextjs, you could set up your project like so:
Starting with a simple link in 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>
);
}
Once you are in [projectId].js use useRouter to get current param and append to your next route
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
Denunciar
Responde la pregunta