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 Catwalk and how you can implement it in your Backstage.

Catwalk

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 Catwalk, there's a <Link> component that you can just 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 Node which has been selected in Backstage as a reference then you get the Node object and you can reference the Node ID and by convention each of the Nodes 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 Component

Another component is the <Reference> component. In Backstage, there are two different fields that can be used for providing links to other pages, selecting a Node 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.

Backstage

To use Links within Backstage, the  <Reference> component needs to be added within a Tastic Schema. 

Below is an shortened Tastic Schema to give you an idea of how to add it into your json Tastic Schema: 

{
    "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 Backstage as "Link" while the type is "Reference" which works like 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> component and all remainder props are again submitted to the inner component.

Once you've done this, it will then be accessible for a Frontend Manager within the Tastic Configuration Panel in the Backstage Editor and looks like this:

Working with Links Tastic Configuration Example

So a Frontend Manager can select "Link" and input a URL or they can select "Node" and choose any Node on the Navigation tree that the link points to.

Other Links

In the Redirects App in Backstage, you'll also come across the term Link. In this case, the Links in the Redirects App 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 component when using Redirects.

If you want to provide an external link, you can just use a text field within the Tastic Schema so your Frontend Manager can add this here, while you point to an  <a> tag in your Tastic jsx. However, if you want them to have the option of adding an external or internal link at any time, we recommend using the <Reference> component as it will save everyone time and effort.

You can also use Anchor point links to jump to certain sections within the same page. This article shows you how.


‹Back

Tips

Still need help? Contact Us Contact Us