작성
·
19
0
<View>
<TouchableOpacity onPress={() => router.navigate(`/activity`)}>
<Text style={{ color: pathname === '/activity' ? 'red' : 'black' }}>
All
</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => router.navigate(`/activity/follows`)}>
<Text
style={{
color: pathname === '/activity/follows' ? 'red' : 'black',
}}
>
Follows
</Text>
</TouchableOpacity>
</View>
일단 코드는 '/activity', '/activity/follows' 만 붙였습니다만, 다른 TouchableOpacity에도 router.navigate를 붙여서 동작을 확인해봤는데 저는 router.push와 같은 동작만 하네요...
강의와 최대한 같은 상황으로 경로를 눌러봐도 push 처럼 동작합니다. 터미널에서 r을 눌러서 재시작도 해보고, npm run android도 다시 해봐도 똑같네요.
어디를 살펴봐야 router.navigate가 제대로 동작할까요?
npm ls react: 19.0.0
npm ls react-native: 0.79.5
npm ls expo: ~53.0.16
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. jasinis102님,
router.navigate
가 router.push
와 동일한 동작을 보여 고민이 많으신 것으로 보입니다. router.navigate
와 router.push
는 보통 비슷한 동작을 하는데, 동작의 차이점을 보기 어려운 경우가 있습니다. 몇 가지 가능한 원인과 해결책을 제안드리겠습니다.
router.navigate
와 router.push
차이:
router.navigate
는 보통 경로를 변경하는 데 사용되며, 브라우저의 뒤로 가기 버튼을 통해 이전 페이지로 돌아올 수 있게 합니다.router.push
는 새로운 페이지를 스택에 추가하여 뒤로 가기 기능에 추가됩니다.페이지 스택 확인:
navigate
가 새로운 스택을 추가하고 있는지를 점검해 보세요.라우터 구현 방식:
navigate
와 push
의 동작 차이가 미미할 수 있습니다. 이러한 경우, 공식 문서나 expo-router
의 관련문서를 확인하여 navigate
의 동작 방식을 더욱 명확하게 이해하는 것이 좋습니다.타입스크립트 설정과 경로 확인:
path
에 문제가 없는지 확인하세요. 경로 설정에 오타가 있는 경우 둔감하게 반응할 수 있습니다.expo start -c
를 실행하여 캐시 문제를 해결한 후 동일한 방법으로 다시 테스트해 보세요.Expo Router Documentation을 통해 자세한 내용을 확인하고, 사용하고 있는 라우터 기능의 동작이 의도에 맞게 설정되었는지 확인해 보시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.