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 |
|
|
| The path or external URL. This is required. |
|
|
| The elements to render inside the |
|
|
| Classes to add to the element. |
|
|
| Replace the current browser history instead of appending it to the stack. |
|
|
| Specify where to open the |
|
|
| Scroll to the top of the page after navigation. |
|
|
| Update the path of the current page without rerunning. |
|
|
| Pass the |
|
|
|
|
|
|
| By default the locale is automatically prepended to the |
|
|
| Activated when a user clicks on a |
|
|
| Activated whenever a pointing device (such as a mouse) enters the |
|
|
| Activated whenever one or more touch points are placed on the touch surface. |