라우터(router)객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다
많은 기능들이 있지만 그중에서 router.push()를 사용해보자
라우팅을 사용할땐
정적 라우팅(Static Routing) : 이동할 디렉토리를 직접 지정해서 이동
import {useRouter} from "next/router"
export default function StaticRoutingPage() {
const router = useRouter()
const onClickMove = () => {
router.push("이동할 디렉토리 위치")
console.log(useRouter);
}
return <button onClick={onClickMove}>페이지 이동하기!!</button>
}
위와 같이 변수.push("이동할 디렉토리 위치") 사용한다
이 정적 하우팅은 단점이 있다
바로 새로운 곳으로 이동하려면 직접 그 디렉토리를 만들어서 지정해 줘야한다
커뮤니티 사이트 같이 게시글이 계속해서 생성되는 곳이라면 직접 하나하나 디렉토리를 늘려 가면 끝이없다
/board/1 ⇒ 1번 게시글 상세보기 페이지
/board/2 ⇒ 2번 게시글 상세보기 페이지
/board/3 ⇒ 3번 게시글 상세보기 페이지
/board/4 ⇒ 4번 게시글 상세보기 페이지
.
.
.
그래서 이를 해결하는 방법이 동적 라우팅이다
동적 라우팅(Dynamic Routing) : 이동할 디렉토리에 값을 넣어 이동
import {useRouter} from "next/router"
export default function DynamicRoutingPage() {
const router = useRouter()
const onClickMove1 = () => {
router.push("./mySite/ABCD")
}
return (
<div>
<button onClick={onClickMove}>ABCD 게시글로 이동하기!</button>
</div>
)
}
위와 같이 했다고 해보자
동적 라우팅은 이동할 디렉토리의 위치(즉 폴더명)를 [변수명] 이렇게 만들어 줘야한다
나는 mysite/[QWER] 이렇게 만들었다 하겠다
import {useRouter} from "next/router"
export default function DynamicRoutingMovedPage() {
const router = useRouter()
return (
<div>
<div>{router.quert.QWER} 게시글로 이동이 완료되었습니다.</div>
</div>
결과는 ABCD 게시글로 이동이 완료되었습니다. 이다
즉 동적 라우팅에서 mysite/[QWER]에서 QWER이 변수명으로 작동해서 router.quert.변수명으로 이동하면 push할때 [QWER]위치에 있던 ABCD가 담겨져 있는 것이다
이걸 활용하면 커뮤니티 게시판 같이 많은 게시물도 폴더 하나로 관리가 가능하다