Best method of linking to a lightning page from a component

Question

I am currently using a custom label that holds a link to a lightning page (flexipage as it's called), and that custom label is used in my component to direct the click to the page. This link is org specific, though, and deploying it between my different environments means the URL needs to be manually changed. What is a better way of linking to the page that is org-agnostic?

Answer 1

The custom labels might not be the right approach since if it gets translated by someone then your navs will break.

If you are building a custom LWC component, then you can navigation service to achieve it.

There are a lot of good examples here. Search for recipes with nav-

For your use case, expose a tab and then use below. This is also documented here

navigateToTabPage() {
    // Navigate to a specific CustomTab.
    this[NavigationMixin.Navigate]({
        type: 'standard__navItemPage',
        attributes: {
            // CustomTabs from managed packages are identified by their
            // namespace prefix followed by two underscores followed by the
            // developer name. E.g. 'namespace__TabName'
            apiName: 'CustomTabName'
        }
    });
}

Answer 2

You can use the NavigationMixin to properly navigate to a tab:

import { NavigationMixin } from 'lightning/navigation';

---

export default class Navtab extends NavigationMixin(LightningElement) {

---

navigateToTabPage() {
    // Navigate to a specific CustomTab.
    this[NavigationMixin.Navigate]({
        type: 'standard__navItemPage',
        attributes: {
            // CustomTabs from managed packages are identified by their
            // namespace prefix followed by two underscores followed by the
            // developer name. E.g. 'namespace__TabName'
            apiName: 'CustomTabName'
        }
    });
}