React Bricks

The Link component


Behind the scenes, the WYSIWYG text editor uses a Link component to render links.

This component renders a normal <a> tag for external links and uses the renderLocalLink function from the configuration to render internal links, so that they leverage either the Gatsby Router or Next.js Router.

As we saw in RichText, for each RichText component, you may replace the Link component with any component you want, by setting the renderLink prop.

Sometimes you may want to use the <Link> component directly, for example if your block renders a link where the path must be provided as a side-prop.

Props

href

The URL for an external link or the local path for a local link

target

The target for the external link (for example "_blank")

children

The content of the link

Usage example

<Link href={href}>{children}</Link>