다이나믹 라우트 동작이 먹히지 않습니다 ㅠ

Question

안녕하세요! React Native도 Next.js와 같이 폴더 기반 라우트라 게시글 수정 페이지를   ~/app/post/update/[id].tsx 에 만들었고, 해당 [id] 부분에 동적으로 게시글 id 값을 넣어 라우팅할 수 있게 하였습니다. 또 ~/app/post/_layout.tsx 레이아웃에 Stack.Screen에 등록도 하였구요!   그래서 엑스포 라우터를 import 하여 import { router } from 'expo-router';   바텀 시트의 수정 버튼 클릭 시, 다음을 호출하였는데요, router.push(`/post/update/${post.id}`);   다음 에러가 납니다... ㅠ   Argument of type /post/update/${number} is not assignable to parameter of type 'RelativePathString | ExternalPathString | ...   '/post/update/[id]'라는 경로는 인식하는 것으로 보아 엑스포 라우터가 다이나믹 경로를 못 찾는 것 같은데 왜 이런 현상이 발생하는지 모르겠습니다 ㅠ

yeong · Answer

https://docs.expo.dev/router/basics/navigation/#dynamic-routes-and-url-parameters   router.push({ pathname: "/post/update/[id]", params: { id: post.id }, }); 저도 같은 문제 때문에 문서 확인해 보니까 이런 식으로 해결하니 해결됐습니다. 몇 달 전 질문이지만 혹시나 앞으로 보실분 있으실까 남겨둡니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Mad Programmer님. 질문해주신 내용을 보니, 다이나믹 라우트를 사용하면서 라우팅할 때 타입 오류가 발생하는 것 같습니다. 이 문제를 해결하기 위한 몇 가지 방법을 제시해 드리겠습니다. 주요 원인 타입 스크립트 관련 문제 : router.push 에 전달되는 경로의 타입이 올바르게 인식되지 않을 때 발생할 수 있습니다. 이 경우, 타입을 명시적으로 지정하거나 아직 정의되지 않은 경로가 사용될 수 있습니다. 경로 문자열 문제 : 템플릿 리터럴을 사용하여 동적 경로를 설정할 때, 특정 타입이 배열 형식의 문자열로 해석되어 발생할 수 있습니다. 해결 방법 타입 캐스팅 사용 : TypeScript에서 문자열 경로로 인식할 수 있도록 타입을 명시적으로 지정해 줍니다. 이는 as const 구문을 사용하여 TypeScript가 올바르게 추론할 수 있도록 합니다. router.push(`/post/update/${post.id}` as const); 정의된 경로 사용 : router.push 에 전달하려는 경로가 라우터의 configure 파트에 정의되어 있는지 확인하고, 이와 같은 경로 문자열을 직접 인식하게 설정해야 합니다. 추가적으로 확인할 점 폴더 구조 맞춤 : app/post/update/[id].tsx 에 정의된 경로가 실제 폴더 구조와 일치하는지 다시 확인하세요. _layout.tsx 설정 확인 : _layout.tsx 에서 해당 스크린을 Stack.Screen에 올바르게 등록했는지 확인하고, 이때 가능한 모든 경로가 제대로 매칭되는지도 점검하세요. 이와 유사한 상황을 다룬 기존 답변을 참고하려면 다음 링크에서 확인해주세요: 🔗 다이나믹 라우트 및 경로 설정 문제 해결 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.