[FE] React - 화면 이동 / react-router-dom / Link / useNavigate

react-router-dom이란?

react에서 라우팅 구현을 돕는 패키지

 

설치 방법

npm install react-router-dom

---

Link란?

html의 a태그와 유사하다.

리액트 라우터(React Router) 라이브러리의 컴포넌트 중 하나이다.

브라우저에서 페이지를 새로고침하지 않고도 애플리케이션 내에서 다른 경로로 이동할 수 있게 해준다.

 

import { Link } from 'react-router-dom'

<Link to = '/register'><button>회원가입</button></Link>

회원가입 버튼을 누르면 /regiser로 이동.

---

useNavigate란?

리액트 라우터(React Router) 라이브러리의 일부인 React Hook이다.

액트 컴포넌트 내에서 브라우저의 주소를 변경하고 다른 경로로 이동하는 데 사용한다.

<Link> 컴포넌트를 사용하여 클릭 이벤트나 버튼을 통해 경로를 변경했지만,

useNavigate를 사용하면 JavaScript 코드 내에서 라우팅을 제어할 수 있다.

 

Help.jsx에서 X버튼을 누르면 이전 페이지로 이동하게끔 useNavigate를 사용했다.

 

Help.jsx는 거의 모든 페이지에서 ★버튼을 누르면 열리고

X버튼을 누르면 닫히는데, 이때 서로 다른 페이지에서 열었으니,

닫히면 또 서로 다른 페이지가 다시 나타나야 된다.

그래서 Link가 아닌 useNavigate를 사용했다.