Level 15

Type-Safe Navigation

Navigation Compose with Serializable Routes

String routes like `"profile/{userId}"` are easy to get wrong. Modern Navigation Compose lets you model destinations as `@Serializable` data classes — the compiler checks your arguments.

📚 Explanation

Type-safe navigation uses `@Serializable` classes as destinations. `navigate(Profile(userId = id))` replaces hand-built route strings, so a missing or mistyped argument becomes a compile error instead of a runtime crash. `backStackEntry.toRoute<Profile>()` deserializes the arguments back into the original data class, giving you fully typed access without manual `getString` parsing.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.toRoute
import kotlinx.serialization.Serializable

// 1. Destinations are types, not strings
@Serializable
object Home

@Serializable
data class Profile(val userId: String)

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Home) {

        composable<Home> {
            HomeScreen(
                onOpenProfile = { id ->
                    // Pass a typed object — no string formatting
                    navController.navigate(Profile(userId = id))
                }
            )
        }

        composable<Profile> { backStackEntry ->
            // Recover the typed arguments safely
            val args: Profile = backStackEntry.toRoute()
            ProfileScreen(userId = args.userId)
        }
    }
}

Back to Android Levels Back to Developer Hub

Type-Safe Navigation

Navigation Compose with Serializable Routes

String routes like `"profile/{userId}"` are easy to get wrong. Modern Navigation Compose lets you model destinations as `@Serializable` data classes — the compiler checks your arguments.

📚 Explanation

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

import androidx.navigation.compose.NavHost

import androidx.navigation.compose.composable

import androidx.navigation.compose.rememberNavController

import androidx.navigation.toRoute

import kotlinx.serialization.Serializable

// 1. Destinations are types, not strings

@Serializable

object Home

@Serializable

data class Profile(val userId: String)

@Composable

fun AppNavigation() {

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Home) {

composable<Home> {

HomeScreen(

onOpenProfile = { id ->

// Pass a typed object — no string formatting

navController.navigate(Profile(userId = id))

}

)

}

composable<Profile> { backStackEntry ->

// Recover the typed arguments safely

val args: Profile = backStackEntry.toRoute()

ProfileScreen(userId = args.userId)

}