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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. as a reference then you get the page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. object and you can reference the page folder ID and by convention, each of the page folderspage folders - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., the <Reference> helper component needs to be added within a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. schema.

Below is a shortened Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. page build within the component settings panel and looks like this:

So a user of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. can select Link and input a URL or they can select a page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. and select any page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. on the navigation tree.

Other links

In Redirects within the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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.


Did this page help you?