Upgraded to @prismicjs/react but internal links (documents) are not rendered

Developing with Prismic
1

Hi! I have migrated to the new version, but the internal links I am placing inside my RichText are not rendered. My external links are working and visible.

I am using the PrismicRichText component. When console logging externalLinkComponents I do get all of them like expected. When console.log internalLinkComponents I don't get any output.

When I am using the components prop and style all hyperlinks found in the RichText, it does get pick up and styled.

What could be the cause that those internal links with the type 'Document' are not shown on my pages?

 <PrismicRichText
            field={content.content.richText}
            internalLinkComponent={({ href, ...props }) => (
              console.log(href), (<Link href={href} {...props} />)
            )}
          />
3

Hi @dfmkraaijeveld
I think you need to wrap your components in a PrismicProvider component where you can import it using import { BrowserRouter, Route, Routes, Link } from "react-router-dom"; this is where you can supply internalLinkComponent (I'm now sure if you can supply it in the PrismicRichText component), such as:

<PrismicProvider
      client={client}
      internalLinkComponent={({ href, ...props }) => (
        <Link to={href} {...props} />
      )}
>

You can check how we have implemented it in our sample project.

Please let me know if you need any further assistance,
Fares

4

This does work for me on Gatsby

have followed the gatsby example here - gatsby-blog/gatsby-browser.js at master · prismicio/gatsby-blog · GitHub
and still, internal links come back blank.

5

okay I got this to work... for anyone else having issues you need to ensure you also pass through the linkResolver

  <PrismicProvider linkResolver={linkResolver} internalLinkComponent={({ href, ...props }) => <Link to={href} {...props} />}>
2 Likes