Android Jetpack Compose Nested Navigation Backstack Behaviour

Question

So in my compose app, I have set up a number of screens with one nested navigation as below:

    composable(
        route = RackInspectionScreen.RackInspectionObservationsRecommendationsScreen.route
    ){
        RackInspectionObservationsRecommendationsScreen(navController = navController)
    }
    
    // Nested Navigation Graph
    navigation(
        startDestination = RackInspectionScreen.RackInspectionDamageReportAreaScreen.route,
        route = "rack_inspection_damage_report_route"
    ) {

        composable(
            route = RackInspectionScreen.RackInspectionDamageReportAreaScreen.route
        ){
            RackInspectionDamageReportAreaScreen(navController = navController)
        }

        composable(
            route = RackInspectionScreen.RackInspectionDamageReportRunScreen.route
        ){
            RackInspectionDamageReportRunScreen(navController = navController)
        } //MORE SCREENS...
    }
    
    composable(
        route = RackInspectionScreen.RackInspectionAppendix1RackInspectionProceduresScreen.route
    ){
        RackInspectionAppendix1RackInspectionProceduresScreen(navController = navController)
    }

    composable(
        route = RackInspectionScreen.RackInspectionAppendix2DamageAssessmentGuidelinesScreen.route
    ){
        RackInspectionAppendix2DamageAssessmentGuidelinesScreen(navController = navController)
    } //MORE SCREENS...

I have a NavigationDrawer, where the user can navigate between the screens when a Navigation item is clicked:

                               navigationItems.forEachIndexed { index, navigationItem ->
                                    NavigationDrawerItem(
                                        modifier = modifier
                                            .padding(NavigationDrawerItemDefaults.ItemPadding),
                                        label = { Text(text = navigationItem.title) },
                                        selected = index == selectedItemIndex,
                                        onClick = {
                                            selectedItemIndex = index
                                            scope.launch {
                                                drawerState.close()
                                            }
                                            Log.d(TAG, navigationItem.route)
                                            navHostController.navigate(route = navigationItem.route ){
                                                
//                                                THIS DOSEN'T WORK:
//                                                popUpTo(navigationItem.route){ 
//                                                    inclusive = true
//                                                }
                                            }
                                        })

The behaviour I want is to minimise the duplication in the backstack and, most importantly, to return to the previous location within the nested navigation. So each of the 'outer screens' to only have one instance in the backstack and only one instance of the 'nested screens' in the backstack..

This video maybe help explains the issue: Multiple Backstacks on Android (My Experience) - Coding with Mitch

Answer 1

I found the answer in this code lab: Jetpack Compose Navigation

And in the documentation here: Support multiple back stacks

What I didn't apprecicate is you need all of these options for it to work as I think it should.