javascriptnext.jsnext-link

NextJS Dynamic Link for Page & Subpage

Using NextJS I Have Dynamic Pages and Dynamic SubPages.

Here is Folders/Files :

pages
├── [Formation]
├── index.js
│   ├── [SubPage].js

In index.js (Formation Page), I Create Links :

<Link href={`[Formations]/[SubPage]`} as={`${Title}/${item}`}>{item}</Link>
<Link href="ReactJS/Udemy">Udemy</Link>

The First One is what I use to navigate to Subpage. But It's not Working the way it should. Navigation is correct, but It Reload the entire page and my Layout in _app.js

The Second is a Test, and it's working, it does not reload the Layout

Both Create the same <a> Tag

Do you know Why the first one isn't working ?

Solution

  • Looks like you are following the old way to handle dynamic route in NextJs. Since the as prop is a simple decorator and href the path your are trying to navigate to, consider doing:

    <Link href={`${Title}/${item}`}>{item}</Link>