React
[React] 뒤로가기, 링크이동 navigate 함수, Link 함수
carrotdy
2022. 6. 28. 11:34
useNavigate()
페이지 전환 시 추가로 처리해야 하는 로직이 있을경우 useNavigate를 사용한다.
ex) 로그인 버튼 클릭
-> 회원가입 사용자 : Main 페이지로 이동
-> 미가입 사용자 : Sign 페이지로 이동
useNavigate()문법
navigate('/주소')
function App = () => {
const navigate = useNavigate()
return (
<button onClick={()=>{ navigate('/detail') }}>이동</button>
)
}
useNavigate() 이용해서 뒤로가기, 앞으로가기
//뒤로가기
<button onClick={() => navigate(-1)}>
Go back
</button>
//앞으로가기
<button onClick={() => navigate(1)}>
Go forward
</button>
Link
클릭 시 바로 이동하는 로직일 때 사용
ex) 상품 리스트에서 상세 보기 페이지 이동
반응형