프론트 101 - static routing board

규링규링규리링·2024년 9월 9일

프론트 공부하기

목록 보기
101/135

static routing board

그냥 단순한 페이지 이동이 아닌
페이지의 특정 게시물의 상세페이지로 이동하는 방법

import { useRouter } from "next/router"

export default function StaticRoutingPage() {
    const router = useRouter()

    const onClickMove1 = () => {
        router.push("/section05/05-02-static-routing-board-moved/1")
    }
    const onClickMove2 = () => {
        router.push("/section05/05-02-static-routing-board-moved/2")
    }
    const onClickMove3 = () => {
        router.push("/section05/05-02-static-routing-board-moved/3")
    }
    const onClickMove4 = () => {
        router.push("/section05/05-02-static-routing-board-moved/4")
    }
    const onClickMove5 = () => {
        router.push("/section05/05-02-static-routing-board-moved/5")
    }
    return (
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
            <button onClick={onClickMove4}>4번 게시글로 이동하기</button>
            <button onClick={onClickMove5}>5번 게시글로 이동하기</button>
        </div>
    )
}  

각 버튼을 누르면 해당 페이지로 이동하게됨

0개의 댓글