[ReactNative] 중첩 라우터 네비게이션 지정해서 페이지 이동

Today, What I learned?

리액트 네이티브에서 중첩 라우터로 Stack을 만들어두고, 내비게이션을 지정했을 때 아래와 같은 에러를 만났다.

중첩 라우터에서는 네비게이션을 어떤 식으로 지정해주어야 하는지 정리해보려고 한다.

 

 

내비게이션 구조

우선 네비게이션 구조는 Root라는 스택에서 스택과 탭을 하나로 묶어주고 있는, 중첩된 구조다.

 

 

중첩된 네비게이션

위 에러 메시지에도 있는 navigation 관련 링크로 이동해서 보면 일반적인 내비게이션 지정은 아래와 같이 할 수 있다.

navigation.navigate('페이지 컴포넌트명');

중첩된 내비게이션에서는 먼저 상위 내비게이션을 지정해 주고 screen이라는 속성으로 페이지명을 지정한다.

navigation.navigate('Root', { screen: 'Profile' });

 

파라미터를 넘겨야 하는 경우, params 라는 속성으로 값을 넘길 수 있다.

navigate('Stacks', {
          screen: 'MusicalDetail',
          params: { musicalId: musical?.mt20id[0] },
})

 

파라미터를 받는 페이지에서는 route를 통해서 값을 받아 사용할 수 있다.

export default function MusicalDetail({
  navigation: { navigate },
  route: {
    params: { musicalId },
  },
}) {
...

 

 

사용하다 보면 은근히 헷갈리는데 상위 내비게이션과 스크린 명을 꼭 지정해주어야 하는 점을 잊지 말아야겠다.