Add Links to Lightning Pages from Your Custom Components

To link to Lightning Experience pages, use lightning:formattedUrl in your custom component. The lightning:formattedUrl component displays a URL as a hyperlink.

Avoid Full Page Reloads

If you use raw anchor tags or the ui:outputUrl (deprecated) component for links, the page does a full reload each time you click the link. To avoid full page reloads, replace your link components with lightning:formattedUrl.

For examples, see the Component Library.

Migrate from ui:outputUrl to lightning:formattedUrl

Copy the attributes from the ui:outputUrl component.

<aura:component>
    <ui:outputURL value="https://my/path" label="Contact ID" />
</aura:component>

Paste the same attributes into the lightning:formattedUrl component. lightning:formattedUrl supports more attributes, like tooltip.

<aura:component>
    <div aura:id="container">
        <p><lightning:formattedUrl value="https://my/path" label="Contact ID" tooltip="Go to Contact's recordId" /></p>
    </div>
</aura:component>

See Also

• Component Library: lightning:formattedUrl Reference