LearnFit
YouTube, React Router 6 Tutorial #4 - Nested Routes
리액트 라우터 버전6의 더욱 간단해진 Nested route
#전체
#개발자
#프론트엔드
#react router
#react router 6
#react router tutorial
#router
#react router 6 tutorial
#react router version 6
#route
#route component
#routes
#switch
#switch vs routes
#nested
#nested routes
#nested route
00:00
*해당 영상에서는 react router 버전5에 맞게 작성된 nested route 구현 코드를 버전 6에서 호환되도록 수정합니다.
공식 문서: https://reactrouter.com/
00:51~01:40
해당 구간의 주석 코드는 버전 5용으로 작성됐던 nested route 관련 코드라 버전 6에서 오류를 일으킵니다. 우선 주석을 해제하며 디버깅을 시작합니다.
/about: 해당 pathname으로 접근 시 하얀 화면만 나옵니다. 이미 App.js에서 /about pathname에 대한 routing 작업을 해놨는데도 불구하구요. Console 창의 에러메시지를 확인해보니 모든 Route는 Routes 내부에서 사용되어야한다고 말하고 있습니다.(Route가 무조건 Routes 내부에 있어야하는 것은 버전 6로 오면서 생긴 특징)
/about/offers: 해당 pathname으로 접근 시 네비게이션 헤더만 나올 뿐 내부 내용은 나오지 않습니다. 에러 메시지를 확인하니 /about/offers에 대한 routing이 되고 있지 않다고 하네요.(이에 대한 자세한 이유는 밑에서 언급)
01:40~03:45
nested route 관련 수정 사항
1. Route를 Routes로 감쌉니다.
2. Route로 Offers를 감싸지 않고 Route의 element에 <Offers />를 입력합니다.(해당 내용은 다른 학습노트 참고)
3. Route의 path를 '/about/offers'에서 'offers'로 수정합니다.(선택)
3번의 경우 필수는 아닙니다. 그러나 react router 버전6로 오면서 Route의 path는 relative한 특징이 생깁니다. 이 말이 무엇이냐면 부모 Route의 path를 기준점으로 잡게 된다는 것이에요.
예: 현재 About 컴포넌트는 App.js에서 pathname '/about'에 routing 되어있습니다. 그리고 offers에 대한 routing은 About 컴포넌트 내에서 이뤄지므로 pathname 시작점이 자동으로 /about으로 잡힙니다. 그래서 path="offers"만 적어도 알아서 path가 '/about/offers'인 것으로 알아듣는 것이죠. 이것이 react router 버전 6의 특징 중 하나입니다.
다시 돌아와서, 3번은 필수가 아닙니다. 그렇지만 About 컴포넌트 내에서 사용되는 Route의 path를 적을 때 앞에 오는 path가 뭐였는지 기억할 필요없이 그냥 뒤에 붙을 pathname만 적어주면 되니까 더욱 편리하겠죠?
03:46~05:18
About이 유발하던 에러는 해결이 되었습니다(Route가 Routes 내에 존재해야한다던 에러)
그러나 아직 /about/offers에 대한 routing이 되고있지 않다는 에러는 해결되지 않았습니다. 이제 이 에러를 해결합니다.
react router 버전6에서는 Route가 기본적으로 exact 방식을 사용하기 때문에 pathname과 Route에 입력된 path가 동일해야지만 routing이 동작합니다.
'/about' pathname에 대해서는 routing이 되고 있지만 '/about/offers' pathname에 대해서는 routing 되고 있지 않기 때문에 /about/offers로 접근 시 어떠한 화면도 보여주지 않는 것이죠. 이를 해결하기 위해 어떻게 해야할까요? <Route path='/about/offers' element={<About />} /> 를 추가로 작성해야할까요? 물론 이렇게 작성해도 문제가 없겠지만 '*'를 path 뒤에 붙이는 것으로 이 문제를 해결할 수 있습니다.
<Route path='/about/*' element={<About />} />
위의 Route는 /about을 포함해서 /about/offers, /about/ahseklj 등 어떠한 형식의 pathname이 '/about'뒤에 붙어도 About 컴포넌트를 routing하게 됩니다.
05:23/about
/about/offers
위의 두 pathname에 대해 의도했던대로 routing 되는 것을 확인가능합니다.
/about/*로 인해 /about/adhlakje 등의 pathname을 입력해도 <About /> 가 렌더링되지만 About 내부의 /about/offers와는 매칭되지 않기에 Offers 컴포넌트는 렌더링 되지 않음
06:51About의 수정사항대로만 코드를 변경하면 ProductDetails도 nested route 관련 에러가 해결돼서 똑같이 생각해보시면 됩니다.
다만 기존 버전5에서 nested route를 위해서 useRouteMatch를 통해 path를 알아내고, 이 path를 Route의 path에서 활용해야했던 번거로움을 버전 6에서는 offers만 적어주면 해결된다는 점을 다시 한 번 상기해주시면 좋을거 같네요.
*ProductDetails는 /products/:id에 routing 되어있습니다. 그래서 부모 Route의 path를 기준으로 path를 작성 할 수 없었던 버전5에서는 동적 값인 :id에 맞춰 nested route를 구현하기 위해 useRouteMatch를 사용해야했던거죠.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기