Navigation in Compose

Navigation Compose keeps a back stack of destinations in a NavController. Since Navigation 2.8, routes can be @Serializable classes or objects, so arguments are typed: navController.navigate(Profile(id = "42")) and backStackEntry.toRoute<Profile>(). Pass IDs, not whole objects, and load data in the destination's ViewModel.

Each back-stack entry has its own ViewModelStore and SavedStateHandle, so a destination's ViewModel lives as long as its entry.

popUpTo(Home) { inclusive = false } clears entries above Home; launchSingleTop avoids duplicates on repeated taps.

Bottom navigation uses saveState = true and restoreState = true to keep each tab's stack.

Navigation 3 is a newer library where you own the back stack as a list; know it exists, and that Navigation 2.x is still the common one.

@Serializable object Home
@Serializable data class Profile(val id: String)

@Composable
fun AppNav(navController: NavHostController) {
    NavHost(navController, startDestination = Home) {
        composable<Home> {
            Button(onClick = { navController.navigate(Profile("42")) }) { Text("Open") }
        }
        composable<Profile> { entry ->
            val route = entry.toRoute<Profile>()
            Text("Profile ${route.id}")
        }
    }
}

Common mistakes

• Passing large objects or Parcelables as arguments.
• Calling navigate in a composable body, so it fires on every recomposition.
• Forgetting launchSingleTop and stacking the same screen twice.

Mention type-safe routes and per-entry ViewModels; that shows current knowledge.

Follow-up questions

Think of your answer first, then open the hint.

1. Where should the navigate call go?

   Show hint

   In an event callback, often passed down as a lambda.

2. How does the destination ViewModel read the argument?

   Show hint

   savedStateHandle.toRoute<Profile>().

Similar on iOS: NavigationStack and deep links SwiftUI NavigationStack holds a path you append to; Navigation Compose keeps entries in a NavController.