Navigate to Lightning component from native record page (without modal)

Question

I understand that I can add a Quickaction to a custom object to load a Lightning component from a native record page in Lightning.

But..this component is displayed in a Modal on top of the original page. I don't want that. I want to redirect to a new "page".

The best thing I could come up with was a empty "button" component which redirects on init.

Markup

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <!-- Note: Just redirects to another page -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:component>

Controller

({
    init : function(cmp, evt, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:otherComponent",
            componentAttributes: {
                marketId: cmp.get("v.recordId"),
                isredirect: true
            }
        });
        evt.fire();
    }
})

This works but is ugly as I see that the page is loaded for a second. I also want to get rid of extra button components.

Answer 1

This is not the Best solution but you can create a visualforce page and URL button to do this.

The visualforce page will get id from URL and then pass that id to the component.

Visualforce page will be

<apex:page showHeader="false" standardController="objectName">

    <apex:includeLightning rendered="true"/>
    <div id="lightning" />

    <script>
        var recordId = "{!$CurrentPage.parameters.id}";
        $Lightning.use(
            "c:demoapp", 
            function() {
                $Lightning.createComponent(
                    "c:otherComponent",
                    { marketId : recordId  },
                    "lightning",
                    function(cmp) {}
                );
            }
        );
    </script>
</apex:page>

Then create a Url button with Url

<yourInstance>/apex/<VisualForcepageName>?id={!objectName.id}

Then add this URL button in your page layout in Salesforce Lightning button section.