Inflearn Community Q&A

마지막의 에러 메시지를 보면 분명 라우터의 설정이 잘못되었다고 나오긴 합니다만.. 제가 보기에도 설정 코드 자체에 문제가 있어 보이지는 않습니다.

다만 memberRouter.tsx의 경우 <Login>이 선언이 안되어 있네요? 이 문제 먼저 확인해 보시고..

혹시 todo등의 다른 경로의 동작에는 문제가 없을까요?

문제가 없다면 memberRouter( )역시 todoRouter()와 동일한 위치에서 확인해 보시고 원인을 더 찾아봐야 할 듯 합니다.

해결이 안되시면 현재 프로젝트를 제가 실행해서 볼 수 있도록 깃헙 주소등을 cookie_00@naver.com으로 보내주시면 확인해 보겠습니다.

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

하나라도더님, React에서 페이지를 찾지 못하는 문제에 대해 말씀해주셨네요. 설명해주신 정보와 첨부된 이미지를 바탕으로, 주로 React Router 설정에서 발생할 수 있는 문제로 보입니다. 해당 상황에서는 다음과 같이 점검하시면 도움이 될 것입니다.

문제 해결을 위한 체크리스트:

1. 경로 설정 확인:

   • memberRouter 함수에서 정의한 각 경로가 실제 컴포넌트와 연결되었는지 확인해보세요. 특히, /member/login 경로에 접근할 때 해당 경로에 맞는 컴포넌트가 정확히 로딩되고 있는지 체크해주세요.
     

2. 라우트 미스매치 문제:

   • 경로가 겹치거나 잘못 설정되어 있을 경우 404 에러가 발생할 수 있습니다. BasicLayout, todoRouter, productsRouter, memberRouter 등 추가된 모든 라우터가 올바르게 연결되어 있는지 살펴보세요.
     

3. Suspense와 Lazy Loading 확인:

   • Suspense와 lazy를 사용하며 경로에 해당하는 컴포넌트가 제대로 로딩되고 있는지 확인하세요. 컴포넌트가 제대로 import되지 않으면 404 페이지가 나타날 수 있습니다.
     

4. ErrorBoundary 또는 errorElement 사용 검토:

   • 에러 발생 시 사용자에게 더 나은 피드백을 줄 수 있도록 ErrorBoundary 나 errorElement 를 활용하여 에러를 사용자 친화적인 메시지로 처리하는 방법을 고려해보세요.
     

참고 자료:

• React Router와 오류 처리: 비슷한 오류와 관련된 사례를 다룬 유사 질문입니다. 해당 링크에서 상세히 다루고 있으며 더 나은 해결책을 찾는데 도움이 될 수 있습니다.
  

이러한 방식으로 문제를 점검하시면, 보다 빠르게 이슈를 파악하고 해결할 수 있으리라 생각합니다.

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