Working with links
It's best practice to have links in your site to other pages but also to external sources. But how do you do this in Frontastic? Here, we'll go through how this works in the API hub and how you can implement it in the Frontastic studio.
API hub
Usually, when working with React, you can just create an <a>
tag wherever you want to create a link. However, if you do this in your Frontastic project when a user clicks on the link the browser will actually perform a normal HTML/HTTP request. This means that the entire frontend app will load from the server again. So if you're linking to within your site, it'll trigger the same process as if you were loading your site for the very first time, removing the benefit of the PWA we provide. Instead of using that <a>
tag, we've created a few ways to achieve proper linking, without doing a full reload and keeping all the benefits of a PWA.
Link component
Within the source folder of your project, there's a <Link>
helper component that you can import using import Link from '@frontastic/catwalk/src/js/app/link'
.
It allows you to set either a path
property to link to a URL path directly or you can use the property route
and this allows you to link directly to any of the Frontastic routes which are available.
So, for example, if you have a page folder that has been selected in the Frontastic studio as a reference then you get the page folder object and you can reference the page folder ID and by convention, each of the page folders is possible to link to with a <route>
that has a node.nodeId
and you'll get the proper link.
<Link route={'node_' + node.nodeId}>
{node.name}
</Link>
All remainder props you submit to the <Link>
are forwarded to the underlying react-router-dom
<Link>
.
Reference helper component
Another helper component is <Reference>
. In the Frontastic studio, there are 2 different fields that can be used for providing links to other pages, selecting a page folder, or providing a link to an external page. By using the <reference>
component, either can be selected and it will be handled correctly and translated to a Link tag.
We'll go through how to use that next.
Frontastic studio
To use links within the Frontastic studio, the <Reference>
helper component needs to be added within a Frontastic component schema.
Below is a shortened Frontastic component schema to give you an idea of how to add it into your schema.json
:
{
"tasticType": "banner",
"name": "Banner",
"schema": [
{
"name": "Link",
"fields": [
{
"label": "Link",
"field": "link",
"type": "reference",
"default": null
}
]
}
]
}
As you can see, the label
and field
is Link
so they would display in the Frontastic studio as Link
while the type is reference
which works as we mentioned earlier.
Then within the tastic.jsx
, you'll need to import reference by using:
import Reference from '@frontastic/catwalk/src/js/component/reference'
As well as returning it within render()
:
<Reference reference={this.props.data.link}>Link Text</Reference>
Internally, the <Reference>
uses the <Link>
helper component and all remainder props are again submitted to the inner component.
Once you've done this, it will then be accessible in the Frontastic studio page builder within the component settings panel and looks like this:
So a user of the Frontastic studio can select Link and input a URL or they can select a page folder and select any page folder on the navigation tree. If they select Link and want to use an external URL, it needs to start with https://
. For example, https://www.commercetools.com
.
Other links
In Redirects within the Frontastic studio, you'll also come across the term link. In this case, the links in redirects actually happen on the server side so it only happens on the very first request, this means you don't need to use the Reference
helper component when using redirects.
If you want to provide an external link, you can use a text field within the Frontastic component schema so a business user can add this here, while you point to an <a>
tag in your tastic.jsx
file. However, if you want them to have the option of adding an external or internal link at any time, we recommend using the <Reference>
helper component.
You can also use anchor point links to jump to certain sections within the same page. This article shows you how.
Updated 7 months ago