Overview

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.

🚧 Important

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.

Import

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

import Link from 'frontend-link'

Usage

import Link from 'frontend-link'

const ExampleComponent = () => (
  <Link
    href="/"
    className="my-class-name"
  >
    Go back to the homepage
  </Link>
)

export default ExampleComponent

Props

name	type	default value	description
`href`	`string`		The path or external URL. This is required.
`children`	`React.ReactNode`		The elements to render inside the `a` HTML tag.
`className`	`string`		Classes to add to the element.
`replace`	`boolean`	`false`	Replace the current browser history instead of appending it to the stack.
`target`	`string`		Specify where to open the `href`. e.g. `_blank` to open in a new tab.
`scroll`	`boolean`	`true`	Scroll to the top of the page after navigation.
`shallow`	`boolean`	`false`	Update the path of the current page without rerunning.
`passHref`	`boolean`	`false`	Pass the `href` down to the child components.
`prefetch`	`boolean`	`true`	`Link` components within the viewport are prefetched in the background by default.
`locale`	`string`		By 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.

Page Builder for Frontend