[ ❗ ] React에서 컴포넌트가 위치한 주소로 화면을 띄울 수 없다.
( = 화면 전환을 할 수 없다)
* React에서 화면 전환을 하기 위해서는 해당하는 컴포넌트에 주소를 부여해야함 !!
👉 react-router-dom 기능 활용 !!
🔴 BrowserRouter : 하위 컴포넌트에 주소를 부여할 수 있도록 기능 허용
🟢 Route : 컴포넌트에 주소 부여하는 기능
🔵 Routes : 컴포넌트에 부여된 주소값을 관리
하위 컴포넌트에 주소 부여 기능을 허용하려면?
=> 상위 컴포넌트에 작성 되야겠지 ?! 🤓
✅ Route 값은 Routes 값으로 감싸줘야 한다 !!
( ≒ li 태그를 감싼, ul 태그 )
( 예전엔 Routes == Switch 라고 사용 함 )
✔️ 주소 경로 값의 대소문자 구분은 상관 없음 !! (/About, /about)
[❗] Route의 path 경로는 절대경로로 작성을 해줘야 한다 ! (./ 이런거 ㄴㄴ)
: Routes로 Route를 감싸주지 않았을 경우, 자주 볼 에러
✅ 컴포넌트에 주소값 부여하는 법
1) a링크
- HTML 자체 페이지를 바꿀때 (전체 렌더링)
2) Link 컴포넌트
- index.html 그대로 두고, 내용만 갈아 끼우는 방식 (SPA / 권장)
3) useNavigate
- 로직과 함께 화면 전환을 해야할 경우 사용됨
✅ a태그를 사용해서 화면을 전환한다면, 페이지를 새로고침 하게 된다
✅ Link 컴포넌트를 사용해서 화면 전환한다면, 페이지 새로고침 ❌ 주소값만 변경
🔴 둘 다, 주소값 부여하려면, 라우트 셋팅을 해야한다 !!! 🔴
✔️ import { 주소(라우트)관련 } from 'react-router-dom'
[ 🧐 ] 차근차근 정리해보자 !
1) 컴포넌트 자체로는 링크 연결 X
2) 컴포넌트 자체에 주소값을 주자
3) 상위 컴포넌트에 {BrowserRouter} 작성
4) 적용할 하위 컴포넌트에 (BrowserRouter) 감싸주기
5) 하위 컴포넌트에 { Route, Routes } 불러 오기
6) Routh path = (절대경로) 연결
--------라우트 셋팅 완료--------
7) 해당 최하위 컴포넌트에, a링크나 Link로 주소값 연결
-끝-
- a링크, Link 컴포넌트는 누르면 끝 [ 바로 주소로 연결 끝 ]
- useNavigate는 로직(조건문 등)과 함께 사용 가능
[ ❓ ] 헷갈리는 경로 정리
▪️ 검정 테마를 기준으로 작성되었읍니다.