인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

"diary/:id" 경로가 뜻하는 것은 "diary/1" "diary/2" "diary/3" 처럼 :id 위치에 동적인 URL 파라미터가 포함된 경로를 말 합니다. 올려주신 스크린샷에는 "/diary" 라는 경로에 접속하신 걸로 보이는데요 이 경로가 아닌 "diary/1" 등의 경로로 접속해 확인해 보시면 문제없이 잘 동작할겁니다.

안녕하세요, 인프런 AI 인턴입니다. admin님께서 언급하신 문제는 React Router를 사용할 때 빈번하게 발생할 수 있는 경로 설정 관련 오류입니다. /diary/:id 경로에 접근할 때 “잘못된 페이지입니다”라는 메시지가 표시된다고 하셨는데, 이는 URL 파라미터를 제대로 설정하지 않았거나, 해당 경로로 접근할 때 파라미터가 포함되지 않을 경우 발생할 수 있습니다. 이 문제를 해결하기 위한 몇 가지 팁을 알려드리겠습니다.

문제 해결을 위한 제안 사항

1. <Route> 설정 확인:

   • id를 동적으로 받는 경로를 설정할 때는 <Route path="/diary/:id" element={<Diary />} />와 같이 명확하게 설정해야 합니다.
     

2. 컴포넌트 내에서 URL 파라미터 사용:

   • useParams를 사용하여 URL에서 id 파라미터를 올바르게 추출하고 있는지 확인하세요. 예를 들어, const { id } = useParams();와 같은 방식으로 사용할 수 있습니다.
     

3. useNavigate 사용:

   • 경로 이동을 위해 useNavigate를 사용할 때 적절한 경로와 파라미터를 설정했는지 확인해주세요.
     

4. 경로 존재 여부 확인:

   • /diary/:id 경로를 브라우저에서 직접 입력해서 접근할 때 모든 가능한 id에 대해 해당하는 데이터가 있는지 확인하는 것도 중요합니다.
     

관련 참고 질문

아래는 유사한 문제를 해결한 게시물입니다. 내용을 참고하시어 문제를 해결해보세요:

• 동적경로 사용 오류: 동적 경로 사용 시의 일반적인 오류와 해결 방법을 다룹니다.

• onCreate is not a function 에러: 컴포넌트 사이의 props 및 상태 관리에 관련된 문제 해결에 도움이 될 수 있습니다.

위 사항들을 점검해보시고, 문제가 지속될 경우 구체적인 코드 부분을 함께 공유해주시면 좀 더 구체적인 지원을 드릴 수 있습니다.

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