React 라우터

React Router

• 리액트는 SPA(싱글 페이지 애플리케이션) 방식 → HTML 전환 없이 컴포넌트만 변경
• 이를 가능하게 하는 라이브러리: React Router

---

1. 정의

• SPA 방식에서 화면 전환 시 새로고침 없이 컴포넌트 변경 지원

---

2. 사용법

1) 설치

npm i react-router-dom

2) Root 컴포넌트 설정

• <BrowserRouter>로 Root 컴포넌트를 감싸야 Routes 연결 가능

3) Routes 정의

• 각 가상 URL과 컴포넌트 연결
• 존재하지 않는 주소는 예외 컴포넌트로 연결
• Path 매개변수 방식 지원 (queryString 미사용)

4) 링크 연결

• <a> 대신 <Link> 사용
• queryString 포함 가능

<Link to="가상URL" > 텍스트 </Link>
<Link to="가상URL?변수명=값&변수명=값" > 텍스트 </Link>

5) 페이지 이동

• location.href 대신 useNavigate() 사용

const navigate = useNavigate();
navigate( "가상URL" );

---

3. URL 경로상의 매개변수 가져오기

1) queryString 방식

• useSearchParams() 사용

const [ searchParams ] = useSearchParams();
const 변수명 = searchParams.get( '매개변수명' );

2) path 방식

• useParams() 사용

const { 매개변수명 } = useParams();