제목: “TypeError: 네비게이션 상태에서 ‘routes’을(를) 찾을 수 없음” 문제 해결
이 블로그 포스트에서는 React Navigation의 createMaterialTopTabNavigator를 사용하는 개발자들이 종종 마주치는 일반적인 오류에 대해 알아보겠습니다. 구체적으로, 오류 메시지 “TypeError: 네비게이션 상태에서 ‘routes’을(를) 찾을 수 없음”에 대해 다룰 것입니다.
No “routes” found in navigation state 오류 이해하기
UpdatesStack과 ShopsStack과 같은 두 개의 별도 화면을 사용하여 createMaterialTopTabNavigator를 사용할 때, 네비게이션 문제가 발생하는 경우가 흔합니다. 목표는 이러한 개별 스택에서 다른 화면으로 이동할 수 있어야 합니다.
<Toptab navigation={this.props.navigation} />그러나 이 코드 한 줄을 추가한다고 해서 다음과 같은 빨간색 화면 오류가 발생할 수 있습니다: “TypeError: 네비게이션 상태에서 ‘routes’을(를) 찾을 수 없음”. 이 오류는 디버깅하기 어렵고 짜증나지만, 해결책이 있습니다!
가능한 해결책
해결책 1: Toptab 직접 내보내기
Toptab을 ParentTheme 컴포넌트로 감싸면서 “TypeError”가 발생하는 경우, 특정 사용 사례에서는 추가적인 래퍼가 필요하지 않을 수 있습니다. 대신, Toptab 자체를 내보내고 다른 컴포넌트와 동일하게 스타일링하십시오.
해결책 2: 라우터 변수 선언
ParentTheme 래퍼를 사용해야 하는 경우, navigation 속성 외에도 Toptab에서 라우터에 접근할 수 있어야 합니다. ParentTheme 컴포넌트에 static router = Toptab.router;를 추가함으로써 router와 navigation이 동일한 인스턴스를 참조하도록 설정할 수 있습니다.
훅을 사용하는 함수형 React 컴포넌트를 사용하는 경우, 컴포넌트 내에서 정적 변수를 선언할 수 없음을 유의해야 합니다. 대신, 다음과 같이 router 변수를 선언할 수 있습니다:
const reactComponent = (props) => {
// 컴포넌트 로직 및 렌더링 코드
};
reactComponent.router = Toptab.router;
export default reactComponent;결론
이 블로그 포스트에서는 React Navigation의 createMaterialTopTabNavigator를 사용할 때 개발자들이 종종 마주치는 일반적인 오류인 “TypeError: 네비게이션 상태에서 ‘routes’을(를) 찾을 수 없음”을 해결했습니다. 추가 컴포넌트로 Toptab을 감싸야 하는지 여부에 따라 두 가지 가능한 해결책을 살펴보았습니다.
이러한 해결책을 따르면 오류를 해결하고 화면 간의 이동을 원활하게 수행할 수 있을 것입니다. 이 문제 해결 가이드가 도움이 되었기를 바라며, 즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/51675083/typeerror-no-routes-found-in-navigation-state
같은 카테고리의 다른 글 보기 :
