Gatsby Link absolute path

Question

By using Link component in Gatsby.js I will not be able to directed by clickin on a link to back to previous urls , eg: I have this url site.com/article/id let's say I am in the id page , so in this case when I use Link I will not be able to go to site.com/article/id2 but instead I will be only be able to go site.com/article/id/article/id2 . How to fix this ?

Answer 1

You just need to add a slash ( / ) the beginning of the to prop:

<Link to={`/${someSlugVar}`} />Click me</Link>

Otherwise, it concatenates the new slug to the current one because of the relativity of the paths. In the end, it behaves like a normal anchor so the approach is exactly the same (your issue will also happen using a normal <a> ).