Link Resolving

When working with field types such as Link or Rich Text, the prismic.io react.js kit will need to generate links to documents within your website.

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 variable named document

Since routing is specific to your site, you will need to define your Link Resolver and provide it to some of the methods used on the fields.

In the React starter project

A Link Resolver is provided in in the React starter project, but you may need to adapt it or write your own depending on how you've built your website app.

Here's an example of a Link Resolver which is found in the src/prismic-configuration.js file of the React starter.

Copy
// In src/prismic-configuration.js
linkResolver: function (doc) {

  // URL for a category type
  if (doc.type == 'category') {
    return '/category/' + doc.uid;
  }

  // URL for a product type
  if (doc.type == 'product') {
    return '/product/' + doc.uid;
  }

 // Backup for all other types
  return '/';
}

Adding to an existing project

If you are incorporating prismic.io into your exisiting React.js project, you will need to create a Link Resolver.

Here is an example that shows how to add a Link Resolver function.

Copy
const linkResolver = function(doc){
  // Pretty URLs for known types
  if (doc.type === 'blog') return "/post/" + doc.uid;
  if (doc.type === 'page') return "/" + doc.uid;
  // Fallback for other types, in case new custom types get created
  return "/doc/" + doc.id;
}

const html = RichText.render(document.data.text_field, linkResolver);

Accessible attributes

When creating your link resolver function, you will have access to certain attributes of the linked document.

doc.id

string

The document id

doc.uid

string

The user-friendly unique id

doc.type

string

The custom type of the document

doc.tags

array

Array of the document tags

doc.lang

string

The language code of the document

doc.isBroken

boolean

Boolean that states if the link is broken or not