Link Resolving

When working with field types such as Link or Rich Text, the 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.

// 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 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.

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/" +;

const html = RichText.render(, linkResolver);

Accessible attributes

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


The document id



The user-friendly unique id



The custom type of the document



Array of the document tags



The language code of the document



Boolean that states if the link is broken or not