Navigate from one LWC to another LWC

You can't (yet).

List of all interesting PageReference types says you're supposed to use standard__component but the target can't be pure LWC. At best it has to be hidden inside an Aura wrapper.

A Lightning component. To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.

It's a pain. I suspect that's also reason why we can't make quick actions with LWC yet, they'd have to be wrapped in Aura.

Click the link in the quote, it'll lead you to example how to pass parameters (/lightning/cmp/c__helloTarget?c__firstname=John)

I have had the similar issues . I have been trying to navigate to an LWC from another in a community and it looks like : In communities, only comm__namedPage page-reference will work.

In Salesforce LWC app, you can navigate from one LWC component to another (which is on another tab/apppage) with the following code

myComponent.html

<a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>

myComponent.js

    import { NavigationMixin } from 'lightning/navigation';
    import { CurrentPageReference } from 'lightning/navigation';

    export default class MyComponent extends NavigationMixin(LightningElement){

        @wire(CurrentPageReference) pageRef;

        @api tabName = "NextPage";
        navigateNext() {
            console.log("tabName = ", this.tabName)
            this[NavigationMixin.Navigate]
                ({
                    type: 'standard__navItemPage',
                    attributes: {
                        apiName: this.tabName
                    }
                });
        }
    }

Please replace the tabName variable with the apppage/tab name you are supposed to navigate.

That's it. You will be navigated to the tabName specified when you click the button in html

You can also go through the official documentation for more : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic

In LWC Application, We can do it in either of the following ways:

1. Using Container Component

Create a parent LWC component that will be containing both the lwc components and showing one of the components at a time.

On clicking of the button, dispatch a custom event to navigate between the components. On receiving the custom event in the container component, hide the visible component and show another.

2. Making use of LWC routes.

For information on lwc routes follow the below link.

http://lwc-router.com/#/quickstart