Evaluation of approach to navigate between 3 LWC pages

Question

Looking at building 3 screens and each has navigation between them using next, previous. Finish button to complete. I know that I could use Lighting Flows to navigate but I would not want to use it. I would like to go with creating custom navigation button which takes me to the respective page. I have two approaches as below. Was looking what does community think about which approach is good( if there is any other opinion please do let me know)

Approach 1)

Parent LWC:

<template>

<template if true > // show first page

<c-first-page.....></c-first-page>

</template>

<template if true > // shows second page

<c-second-page.....> </c-second-page> // Displays Questions and questions to be asked page

</template>

<template if true > // show 3rd page

<c-third-page.....></c-third-page>

</template>

<buttons>
Previous,Next,Cancel,Done
// button section will be displayed based on which page we are in
</button>

Approach 2)

Build 3 different LWC:

<c-first-page> , <c-second-page> and <c-third-page>

Each has button based on which order they appear. Example - first page will have next but last page will have finish

Use LWC PageReference Type - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_page_reference_type to navigate between page. Previous and Next

Answer 1

Both of the approaches will work. I personally will prefer approach 1 where Parent Component passes states down to other components.

For the second approach you will need aura components wrapping lwc and making it url:addressable. It can be difficult navigating through the code to find and maintain states.

The other thing to experiment with the approach 1 is to use Lightning Message Service. Note that this in BETA and has limitations highlighted here.

You cannot use LMS for appexchange or ISV apps yet and if you are building for mobile experience then this might not be the right choice because of limitations at this point.

Also if you are expecting more steps than 3 in future you might want to explore a state management solution like redux along with your lwc.

Answer 2

I think, for this best suited feature is Lightning Flow.

First, You can create the three screens in the flow.

You can drag and drop the standard component or create your own component and put on the screen.

If you want this flow can be used in the lightning component. Refer below link

The best thing. this will automatically manage the Next and Previous feature.

You can try http://lwc-router.com/#/ for the navigation between components.

Thank you