router.push() 오류

React Native with Expo: 제로초에게 제대로 배우기

중첩 라우터와 그룹폴더의 활용

작성

npm ls react : react@19.0.0
npm ls react-native: react-native@0.79.5
npm ls expo: expo@53.0.19

강의와 소스코드 자료에서 주어진 것과 동일하게 \[username]\index.tsx에 다음과 같이 작성했는데 router.push()에 동적 주소 넣는 부분에서 오류가 발생하는 것 같아요.
이 경우에는 어떻게 해결해야 하나요?

import { Text, View, TouchableOpacity } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";

export default function Index() {
  const router = useRouter();
  const { username } = useLocalSearchParams();

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View>
        <TouchableOpacity onPress={() => router.push(`/${username}`)}>
          <Text>Threads</Text>
        </TouchableOpacity>
      </View>
      <View>
        <TouchableOpacity onPress={() => router.push(`/${username}/replies`)}>
          <Text>Replies</Text>
        </TouchableOpacity>
      </View>
      <View>
        <TouchableOpacity onPress={() => router.push(`/${username}/reposts`)}>
          <Text>Reposts</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

'`/${string}`' 형식의 인수는 'RelativePathString | ExternalPathString | "/modal" | `/modal?${string}` | `/modal#${string}` | "/home" | `/home?${string}` | `/home#${string}` | "/[username]/index" | `/[username]/index?${string}` | ... 53 more ... | { ...; }' 형식의 매개 변수에 할당될 수 없습니다.

react react-native 하이브리드-앱 typescript expo

답변 2

제로초(조현영)

지식공유자

타입 문제라서 as any를 붙이는 방식으로 가장 쉽게 우회할 수 있습니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. dbrud5804님,

router.push()에서 동적 주소(/${username} 등)를 사용하는 경우 발생하는 오류에 대해 해결책을 제공해 드리겠습니다. 이 오류는 매개 변수의 타입이 올바르지 않음을 나타냅니다.

해결 방법:

타입스크립트의 경로 형식 제한: 현재 오류는 router.push()가 지정한 경로 형식을 허용하지 않기 때문에 발생합니다. 이 경우, 형식이 목적에 맞는지 검토해야 합니다.
매개 변수 타입 확인: router.push 함수가 예상하는 형식에 대한 타입스크립트 정의를 확인합니다. 이는 일반적으로 특정 경로 형식(상대 경로, 외부 경로 등)으로 제한될 수 있습니다. 외부 패키지의 업데이트나 타입 정의의 변경으로 인한 것일 수 있습니다.
Expo 버전과 패키지 호환성 확인:
- Expo의 특정 버전과 react 및 react-native의 호환성을 확인하세요. 버전 불일치는 종종 타라한 함수를 사용할 때 예기치 않은 오류로 이어질 수 있습니다.
수정 제안:
만약 경로 형식이 올바르지만 오류가 지속되는 경우, 강제적으로 형식 변환을 시도할 수 있습니다(TS의 타입 캐스팅 또는 as 키워드 사용). 예를 들어:
```
router.push(`/${username}` as const);
```
라이브러리 문서와 일치하는지 확인: expo-router의 공식 문서에서 router.push()와 관련된 최신 사용 예제를 확인하여 현재 구현이 일치하는지 비교하세요.

추가 자료

유사한 문제 해결된 StackOverflow 사례: 타입스크립트 관련 오류 해결 방법을 참조하는 것이 도움이 될 수 있습니다.
Expo Router Documentation: 최신 API 및 사용법을 확인해서 오류의 근본 원인을 찾는 것이 중요합니다.

문제가 계속 되신다면 추가 정보를 주시거나 정확한 오류 로그를 제시해주시면 더 자세하게 도움을 드릴 수 있습니다.

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

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