Search code examples
javascriptreactjsgatsby

Gatsby Link absolute path

By using Link component in Gatsby.js I will not be able to directed by clickin on a link to back to previous urls , e.g: 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 ?

Solution

  • 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>).