Frontend Link


The Link component is a wrapper around the a HTML element.

It enables client side routing, optimizations like prefetching of pages, and accepts children as prop to render inside the a HTML element.



You should always use <Link> instead of a plain <a> HTML element when creating routes within your PWA storefront. Doing so will enable Shogun Frontend's automatic performance optimizations like link caching.


frontend-link is already pre-installed on every Shogun Frontend store. To import:

import Link from 'frontend-link'


import Link from 'frontend-link'

const ExampleComponent = () => (
    Go back to the homepage

export default ExampleComponent


nametypedefault valuedescription
hrefstringThe path or external URL. This is required.
childrenReact.ReactNodeThe elements to render inside the a HTML tag.
classNamestringClasses to add to the element.
replacebooleanfalseReplace the current browser history instead of appending it to the stack.
targetstringSpecify where to open the href. e.g. _blank to open in a new tab.
scrollbooleantrueScroll to the top of the page after navigation.
shallowbooleanfalseUpdate the path of the current page without rerunning.
passHrefbooleanfalsePass the href down to the child components.
prefetchbooleantrueLink components within the viewport are prefetched in the background by default.
localestringBy default the locale is automatically prepended to the href.

Passing a string to locale will override the prepended locale.

Passing false will disable prepending.
onClick((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)Activated when a user clicks on a Link component.
ouMouseEnter((event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)Activated whenever a pointing device (such as a mouse) enters the Link area.
onTouchStart((event: React.TouchEvent<HTMLAnchorElement>) => void)Activated whenever one or more touch points are placed on the touch surface.