Router
: 사용자가 어떤 주소로 들어왔을 때 그 주소에 해당하는 페이지(데이터)를 사용자에게 보내주는 것을 말한다.
React Router 사용하기
리액트 라우터 설치
npm install react-router-dom
yarn add react-router-domBrowserRouter
- HTML5를 지원하는 브라우저의 주소를 감지한다.(History API를 사용해 현재 위치의 URL을 지정해주는 역할)
- BrowserRouter는 리액트 라우터의 도움을 받고 싶은 컴포넌트의 최상위 컴포넌트를 감싸는 래퍼 컴포넌트이다.
HashRouter
- http://~.com/#hashrouter (해쉬태그)를 감지 한다.
- 일반적으로 브라우저 히스토리 API를 지원하지 않는 환경에서 사용한다.
Routes
- 자식 routes들을 구성하고 있는 단위이고, 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
Routes는 React Router v6에서 도입된 새로운 컴포넌트로, 이전의Switch를 대체합니다.
Route
- path 속성에는 경로, element 속성에는 보여줄 컴포넌트를 넣어준다.
- 하위경로에 여러 라우팅을 매칭시키고 싶다면 URL뒤에
*을 사용하여 일치시킬 수 있다.
(v6 업데이트 이후에 path가 정확하게 매치되는 컴포넌트만 보여줬던exact속성이 없어졌다. 이제는 자동으로 정확하게 매칭됨)
Link
- to 속성을 넣어서 경로를 작성해준다.
- 페이지 간 네비게이션을 위한 컴포넌트이다.
NavLink
: 만약 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 클래스를 적용할 수 있는 컴포넌트이다.
useNavigate() hook
- 이 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
- 반환하는 함수를 특정 변수에 저장한 후, 변수의 인자에 원하는 path 값을 넘겨주면 해당 경로로 이동할 수 있다.
- Link와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.
