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.