네비게이팅

1. 클라이언트 사이드 방식의 링크 생성

● a태그

서버에게 새로운 페이지를 요청하는 방식으로 페이지 이동함

 

● Link컴포넌트

// href에 경로를, 태그 사이에 화면에 표시할 텍스트를 작성
<Link href={"/"}>index</Link>
<Link href={"/search"}>search</Link>

 

● 이벤트 핸들러 함수

    컴포넌트 내부에서 특정 조건이 만족했을 때, 함수 내부에서도 페이지를 CSR방식으로 이동할 수 있다.

const onClickButton = () => {
    router.push("/test");
};
  
return (
    <div>
        <button onClick={onClickButton}>/test 페이지로 이동</button>
    </div>
)

 

router.push: 페이지 이동

router.replace: 뒤로가기를 방지하며 페이지 이동

router.back: 뒤로가기