Hyperlink to recordId in lightning component?

Question

I am learning lightning components. I am wanting to know how to do a hyperlink you can click that takes the user to the recordId of the item clicked.

So for example I have a users card graphic with their information. One of these is their name, which is a hyperlink. You click it and it takes you to the recordId.

The custom object I am using for these users is called Guest__c

So the link in lightning for my Guest__c record looks like this

lightning/r/Guest__c/a030X00001MHkwiQAD/view

Lightning Component snippet:

        <div style="background-color:WhiteSmoke;">
        <div class="card-content" style="padding:5px;font-size:.7em;">{!v.item.title}

This above shows the item. {!v.item.title} is the name.

Answer 1

You can use Navigation Event. Here is an example from documentation:

Component [c:navToRecord]-

<aura:component>
    <aura:attribute name="recordId" type="String" />

    <p><a onclick="{!c.handleClick}">link to record</a></p>
</aura:component>   

Controller [navToRecordController.js]-

({
    handleClick: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.recordId")
        });
        navEvt.fire();
    }
})

Answer 2

You can use lightning:formattedUrl. It is easy to use and it will make your code small.

Displays a URL as a hyperlink. This component requires API version 41.0 and later.

You can use it in the different way as follows:-

    <p><lightning:formattedUrl value="my/path" /></p>
    <p><lightning:formattedUrl value="https://my/path" tooltip="Go to https://my/path" label="My Cool Website" target="_blank" /></p>
    <p><lightning:formattedUrl value="ftp://my/path" tooltip="Go to ftp://my/path" /></p>
    <p><lightning:formattedUrl value="http://my/path" /></p>
    <p><lightning:formattedUrl value="/my/path" /></p>
    <p><lightning:formattedUrl value=".my/path" /></p>

The result will be like:-

http://my/path
My Cool Website
ftp://my/path
http://my/path
/my/path
.my/path

Usage Considerations

Use the target attribute to change where the link should open. If you don't provide a target, the hyperlink renders without the href attribute. Supported target values are:

• _blank: Opens the link in a new window or tab.
• _self: Opens the link in the same frame as it was clicked. This is the default behavior.
• _parent: Opens the link in the parent frame. If there's no parent, this is similar to _self.
• _top: Opens the link into the top-level browsing context. If there's no parent, this is similar to _self.

Reference:- https://developer.salesforce.com/docs/component-library/bundle/lightning:formattedUrl/example