Frontend Link

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.


Did this page help you?