CODEWITHSUNDEEP
javascriptreactjsnext.js
Packeer Mydeen
Packeer Mydeen

Reputation: 41

Dynamic routing in Next Js return 404 and then reloads

Whenever the user clicks on the button I need to redirect to /solutions/[id] where id is dynamic. Tried using Link and next router. If I click that button its failing for the first time(returns 404) and then automatically page reloads. Is this expected behaviour? How do i avoid this?

<Link href="/quiz/solutions/a">
     <a>First comment</a>
</Link>

My folder structure

pages
    -solutions
          -[index].js

Upvotes: 0

Views: 348

Answers (1)

kyle
kyle

Reputation: 2638

On Next versions prior to 10, you have to use the href and as props. Check out this issue for more information. Here is a link to the old documentation as well, the relevant part of the docs state:

href is a file system path used by the page and it shouldn't change at runtime. as on the other hand, will be dynamic most of the time according to your needs.

<Link href="/quiz/solutions/[id]" as="/quiz/solutions/a">
  <a>First comment</a>
</Link>

This is assuming that the page is [id].js inside the solutions folder.

Upvotes: 1

Related Questions