How to navigate between other navHost

Question

My Root Graph

@Composable
fun RootNavigationGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = RootScreen.Welcome.route
    ) {
        welcomeGraph(navController)
        authGraph(navController)
        composable(route = RootScreen.Main.route) {
            MainScreen()
        }
        trackingGraph(navController)
    }
}

My Main Graph

this for bottom navigation

@Composable
fun MainNavigationGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = RootScreen.Dashboard.route,
        route = RootScreen.Main.route
    ) {
        dashboardGraph(navController)
        orderGraph(navController)
        profileGraph(navController)
    }
}

My Composable View

This code inside DashboardScreen that wrap in dashboardGraph @Composable fun FeatureCardList(items: List, navController: NavController) {

    LazyRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
        items(items) { menus ->
            FeatureCardItemSingle(
                item = menus,
                onClick = {
                    Log.d("FeatureCardList", "Clicked item: ${menus.move_to}")
                    navController.navigate(RootScreen.Tracking.route)
                }
            )
        }
    }
}

Answer 1

you need to use nested navigation graph

@Composable
fun RootNavigationGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = RootScreen.Welcome.route,
        nestedNavGraphs = listOf(
            NavGraph(
                route = RootScreen.Main.route,
                startDestination = RootScreen.Dashboard.route
            ) {
                mainGraph(navController)
            }
        )
    ) {
        welcomeGraph(navController)
        authGraph(navController)
        composable(route = RootScreen.Main.route) {
            MainScreen()
        }
        trackingGraph(navController)
    }
}

then navigate in your card

@Composable
fun FeatureCardList(items: List<Menu>, navController: NavController) {
    LazyRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
        items(items) { menu ->
            FeatureCardItemSingle(
                item = menu,
                onClick = {
                    Log.d("FeatureCardList", "Clicked item: ${menu.move_to}")
                    navController.navigate(RootScreen.Main.route + "/${RootScreen.Tracking.route}")
                }
            )
        }
    }
}