Next Js中的动态路由返回404然后重新加载

Question

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

Answer 1

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.