How to navigate with arguments in jetpack compose?

Question

This is my Navhost

composable(
        "${Screens.Start.route}/{tId}",
        arguments = listOf(navArgument("tId") {
            type = NavType.StringType
        })
    ) {
      
        StartScreen(viewModel, navController, it.arguments?.getString("tId") ?: "")


    }

    composable(
        "${Screens.Timer.route}/{sId}",
        arguments = listOf(navArgument("sId") {
            type = NavType.StringType
        })
    ) {
            TimerScreen(viewModel, navController, it.arguments?.getString("tId") ?: "")
        }


    }

I m naivgating from Main Screen to Start screen But not navigating from start to Timer Screen, i have passed the same id which im getting from Main Screen.

This main composable

    @Composable
fun Main(task: CustomeTask, navController: NavController) {
    Box(.clickable {
                navController.navigate("${Screens.Start.route}/${task.pid.toString()}")
            }
         }

StartScreen

    @Composable
fun StartScreen(viewModel: MainViewModel, navController: NavHostController, id : String) {
onclick{
                      navController.navigate("${Screens.Timer.route}/{$id}")

}

as i click on button app crashes and error is below

 java.lang.NumberFormatException: For input string: "{11}"
    at java.lang.Long.parseLong(Long.java:594)
    at java.lang.Long.parseLong(Long.java:636)
    at com.ashish.custometimer.ui.TimerScreenKt.TimerScreen(TimerScreen.kt:36)
    at com.ashish.custometimer.navigation.NavGraphKt$NavGraph$1$6.invoke(NavGraph.kt:64)
    at com.ashish.custometimer.navigation.NavGraphKt$NavGraph$1$6.invoke(NavGraph.kt:58)

Answer 1

The braces in {tId} when you declare your route are to let Navigation what to parse into your argument; you don't include those braces in your navigate call.

navController.navigate("${Screens.Timer.route}/$id")