How to Use NavHost in Compose in Android: Simple Guide

In Jetpack Compose, use NavHost inside a NavController to define navigation graphs and destinations. You create a NavController with rememberNavController() and pass it to NavHost, which manages composable screen navigation based on routes.

Syntax

The basic syntax involves creating a NavController and passing it to NavHost. Inside NavHost, you define composable destinations with unique routes.

• NavController: Controls navigation actions.
• NavHost: Hosts navigation graph and displays composables.
• composable: Defines each screen with a route and content.

kotlin

val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
  composable("home") { HomeScreen(navController) }
  composable("details") { DetailsScreen(navController) }
}

Example

This example shows a simple app with two screens: Home and Details. The NavHost manages navigation between them using buttons.

kotlin

import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.navigation.compose.*

@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController = navController, startDestination = "home") {
    composable("home") {
      Scaffold(
        topBar = { TopAppBar(title = { Text("Home") }) },
        content = {
          Button(onClick = { navController.navigate("details") }) {
            Text("Go to Details")
          }
        }
      )
    }
    composable("details") {
      Scaffold(
        topBar = { TopAppBar(title = { Text("Details") }) },
        content = {
          Button(onClick = { navController.popBackStack() }) {
            Text("Back to Home")
          }
        }
      )
    }
  }
}

Output

App with a Home screen showing a button labeled 'Go to Details'. Clicking it navigates to a Details screen with a button labeled 'Back to Home' that returns to Home.

Common Pitfalls

Common mistakes when using NavHost include:

• Not using rememberNavController() to keep navigation state.
• Forgetting to set a startDestination.
• Using incorrect or duplicate route names causing navigation errors.
• Not handling back navigation properly with popBackStack().

kotlin

/* Wrong: Creating NavController inside NavHost causes state loss */
NavHost(navController = NavController(LocalContext.current), startDestination = "home") {
  composable("home") { /*...*/ }
}

/* Right: Use rememberNavController() to preserve state */
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
  composable("home") { /*...*/ }
}

Quick Reference

Here is a quick summary of key NavHost usage points:

Concept	Description
rememberNavController()	Creates and remembers NavController for navigation state.
NavHost	Hosts navigation graph and shows composable destinations.
startDestination	The first screen shown when app starts.
composable(route)	Defines a screen with a unique route string.
navController.navigate(route)	Navigate to a destination by route.
navController.popBackStack()	Navigate back to previous screen.

Key Takeaways

Use rememberNavController() to create a stable NavController for Compose navigation.

Define your navigation graph inside NavHost with composable destinations and unique routes.

Always set a startDestination to specify the first screen shown.

Use navController.navigate() to move between screens and popBackStack() to go back.

Avoid creating NavController inside NavHost directly to prevent losing navigation state.