Rendering a Link or Content Relationship Field

The Link field is used for adding links to the web, to documents in your prismic.io repository, or to files in your prismic.io media library. The Content Relationship field is a Link field specifically used to link to a Document.

Before Reading

This page assumes that you have already imported the prismic-reactjs library as shown below.

import {Link, RichText, Date} from 'prismic-reactjs';

This page also assumes that you have retrieved your content and stored it in a state variable named document.

It is also assumed that you have imported a Link Resolver with the variable name linkResolver. To learn more about this, check out the Link Resolving page. 

Here's how to render a Link to the Web. In this example, the Link field has the API ID of web_link.

Copy
render() {
  if (this.state.document) {
    const document = this.state.document;
    
    var target = {};
    if (document.data.web_link.target) {
      target = { 
        target: document.data.web_link.target,
        rel: "noopener"
      };
    }
    
    return (
      <a href={Link.url(document.data.web_link, linkResolver)} {...target}>Web Link</a>
    );
  } else {
    return null;
  }
}

When integrating a Link to a Document in your repository, a Link Resolver is necessary as shown below. To learn more about this, check out our Link Resolving page.

In the following example the Content Relationship (Link to a Document) field has the API ID of document_link.

Copy
<a href={Link.url(document.data.document_link, linkResolver)}>Go to page</a>

Here's how to render a Link to the media item. In this example, the Link field has the API ID of media_link.

Copy
<a href={Link.url(document.data.media_link, linkResolver)}>View Image</a>

Note that all the examples above use a Link Resolver to output the link. This is only required for a Link to a Document.

If you know that your link will always be to Media Item or to the Web, then you can remove the Link Resolver. If the link is to or might be to a Document, then you should use the Link Resolver.