how to create a hyperLink to open up the record page

Question

I want to convert {!'RaceName' + v.race.Name} to a hyperlink which should link to the built-in Salesforce edit page, I have tried to convert it into a hyperlink but it just didn't work?

<aura:component controller="RaceController">
<aura:attribute name="race" type="Race__C" />
<aura:attribute name="recordId" type="String" /> 
<header class="slds-card__header" >               
    <p class="slds-text-heading--label" >

        <a onclick="{!c.handleClick}"> {!'RaceName: ' + v.race.Name} </a></p>
</header>

above is my code and after the header, I have rest of the columns to show on the list page

I have a sobject Race__c and I have created a lightning component page to add and retrieve the value from this object. The list page where I have iterated all the records from that object I want to add a hyperlink to the name to open up its default record page.

as showing in the above image I want to convert the RaceName as hyperlink which basically open ups its system default page. which is the below one

now I am getting the below error

Answer 1

The redirection should be managed in your client side controller using a lightning navigation event.

Anchor Tag:

component.cmp

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

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

controller.js

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

As per the hyperlink not being highlighted as such, thats because you closed your anchor tag before adding the text from your variable binding.