How to restrict navigate function in Gatsby to redirect only client routing URLs, not to external site.
How to restrict navigate function in Gatsby to redirect only client routing URLs, not to external site.
Gatsby navigation extends from @reach/router (from React) and it's intended to use only with internal navigation so by default, their use it's restricted only to the internal routes of the project.
As you can see in Gatsby's docs:
For internal navigation, Gatsby includes a built-in
<Link>component for creating links between internal pages as well as anavigatefunction for programmatic navigation.The component is a wrapper around
@reach/router’sLinkcomponent that adds useful enhancements specific to Gatsby. All props are passed through to@reach/router’sLinkcomponent.
For external links, you always will need to use the "traditional" anchor (<a>). On the other hand, Gatsby's navigation is strictly restricted for internal routing.