Nested Navigation Jetpack Compose

Question

Been experimenting with nested navigation in Jetpack Compose in composables, currently I have created an intent and an activity that has the following composable function:

// @Composable
val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = "product/feature1"
) {
    navigation(
            startDestination = "feature1",
            route = "product"
        ) {
            navigation(
                startDestination = "main",
                route = "feature1"
            ) {
                composable(route = "main") {
                    MainScreen()
                }
            }
        }
}

I've been trying to navigate to the main screen with startDestination was "product/feature1", but it is throwing the following exception. Would really appreciate the help!

java.lang.IllegalArgumentException: navigation destination product/feature1 is not a direct child of this NavGraph androidx.navigation.NavGraphNavigator.navigate(NavGraphNavigator.kt:72)

Answer 1

The error you're encountering is due to the structure of your navigation graph in Jetpack Compose's NavHost. The error message is indicating that the navigation destination "product/feature1" is not a direct child of the current NavGraph.

From the code you provided, it seems like you're trying to create a nested navigation structure with three levels: "product" -> "feature1" -> "main". However, the way you've defined the navigation hierarchy is causing the issue.

To fix this, you need to make sure that each navigation composable is a direct child of the previous one. Here's how you can restructure your code to create the nested navigation correctly:

val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = "product/feature1"
) {
    navigation(
        startDestination = "feature1",
        route = "product"
    ) {
        composable(route = "feature1") {
            // This is the feature1 screen
            Feature1Screen(navController = navController)
        }
        navigation(
            startDestination = "main",
            route = "feature1/{itemId}",
        ) {
            composable(
                route = "main",
                arguments = listOf(navArgument("itemId") { type = NavType.StringType })
            ) { backStackEntry ->
                val itemId = backStackEntry.arguments?.getString("itemId")
                MainScreen(itemId = itemId)
            }
        }
    }
}

In the code above, I've restructured the navigation to make sure each navigation composable is a direct child of the previous one. Additionally, I've added a parameter "itemId" to the route "feature1/{itemId}" to demonstrate passing arguments between screens.

Remember to adjust the composable functions like Feature1Screen and MainScreen to accept any necessary arguments or state that you need for your app.

By following this structure, you should be able to create a nested navigation flow within Jetpack Compose's NavHost without encountering the "not a direct child of this NavGraph".