Link Resolving

When working with field types such as Link or Rich Text, the Prismic react.js kit will need to generate links to documents within your website by using a Link Resolver function.

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 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 function for a project that has three different custom types. It should be defined as part of the src/prismic-configuration.js file.

// In src/prismic-configuration.js
export const linkResolver = (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}`

  // URL for a page type
  if (doc.type === 'page') {
    return `/${doc.uid}`

  // Backup for all other types
  return '/'

Adding to an existing project

If you are incorporating Prismic into your existing React.js project, you will need to create a Link Resolver.

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

import { RichText } from 'prismic-reactjs';

const linkResolver = (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/${}`
// A React component
export default function TextField({ document }) {
  return (
    <RichText render={} linkResolver={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

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.