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

안녕하세요!

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]'라는 경로는 인식하는 것으로 보아 엑스포 라우터가 다이나믹 경로를 못 찾는 것 같은데 왜 이런 현상이 발생하는지 모르겠습니다 ㅠ

안녕하세요, 인프런 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에 올바르게 등록했는지 확인하고, 이때 가능한 모든 경로가 제대로 매칭되는지도 점검하세요.

이와 유사한 상황을 다룬 기존 답변을 참고하려면 다음 링크에서 확인해주세요:

🔗 다이나믹 라우트 및 경로 설정 문제 해결

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

주요 원인

해결 방법

추가적으로 확인할 점