인프런 커뮤니티 질문&답변
작성한 질문수
Outlet 질문이요
작성
·
38
0
IndexPage.js 에서 <Outlet/>을 했는데 todo메뉴를 클릭하면 "/list" 페이지로 이동을 안 합니다.
console창을 보니 This means it will render an <Outlet /> with a null value by default resulting in an "empty" page 문구가 뜨는데 왜 그러는걸까요?
답변 2
0
아마도 라우팅 설정이 제대로 인식되지 않았을 가능성이 높아 보입니다.
/todo를 호출했을 때 자동으로 /todo/lsit로 이동하는 것은 <Navigate >를 이용한 설정이라 Outlet과는 관계가 없긴 합니다. 코드를 볼 수 있으면 좀 더 확실히 답변을 드릴 수 있을 듯 합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
hlkang님께서 겪고 계신 문제는 <Outlet /> 컴포넌트가 현재 서브 라우트를 정상적으로 렌더링하지 못하고 있는 상황과 관련이 있습니다. 이 에러 메시지가 나타나는 이유는 주로 라우트 구성에서 <Outlet /> 컴포넌트를 포함한 상위 라우트에 하위 라우트가 제대로 설정되지 않았기 때문입니다.
이 문제를 해결하기 위해 세 가지 사항을 점검해 보시기 바랍니다:
라우트 구성 확인:
IndexPage.js에서<Outlet />을 사용하고 있는 상위 라우트에 하위 라우트가 올바르게 설정되어 있는지 확인합니다. 예를 들어,list경로에 대해 하위 라우트를 설정해주어야 합니다.라우터 구성 파일 확인: React Router에서
BrowserRouter또는HashRouter안에 모든 라우트가 잘 구성되어 있는지, 중첩된 라우트가 제대로 설정되었는지 다시 확인하시기 바랍니다.코드 예제와 비교: 아래의 링크를 통해 다른 유사한 구성 예제 및 설명을 참고하실 수 있습니다.
만약 위의 사항들이 해결에 도움이 되지 않는다면, 프로젝트의 설정 사항이나 추가적인 코드를 공유해주시면 보다 구체적인 도움을 드릴 수 있도록 하겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
<Outlet> 문제가 아니라 라우팅쪽 문제였습니다. /list 호출할때 Element: 가 대문자로 되어 있어서 발생한 에러였습니다. 답변 감사합니다.