Static / Dynamic routing
Static routing은 페이지 이동시 내가 직접 경로를 설정해주는것이다
import {useRouter} from 'next/router'
export default function StaticRoutingPage(){
const router = useRouter()
const onClickMove = () =>{
router.push("/05-02-static-routed")
}
return(
<button onClick={onClickMove}>페이지 이동하기</button>
)
}
이럴 경우 페이지가 혹시 10000000개 이상이 넘어 간다면 하나하나 경로를 설정하는 것에 어려움을 느낄것이다
그것을 보완하기 위해 Next.js에서 제공하는 것이 동적라우팅이다
Dynamic routing은 폴더를 대괄호로 감싸서 변수명으로 만들어준다
router.query = { boardId: 1 }
router를 통해 페이지 이동시 정보를 넘겨주는 방법은
router.push를 이용한다
import { useRouter } from 'next/router'
export default function StaticRoutingPage(){
const router = useRouter()
const onClickMove1 = () => {
router.push("/05-06-dynamic-routed-board/83011")
}
const onClickMove2 = () => {
router.push("/05-06-dynamic-routed-board/83012")
}
const onClickMove3 = () => {
router.push("/05-06-dynamic-routed-board/83013")
}
return (
<div>
<button onClick={onClickMove1}>83011번 게시글로 이동하기!!!</button>
<button onClick={onClickMove2}>83012번 게시글로 이동하기!!!</button>
<button onClick={onClickMove3}>83013번 게시글로 이동하기!!!</button>
</div>
)
}
import { useQuery, gql } from '@apollo/client'
import { useRouter } from 'next/router'
const FETCH_BOARD = gql`
query fetchBoard($number: Int){
fetchBoard(number:$number){
number
writer
title
contents
}
}
`
export default function StaticRoutedPage(){
const router = useRouter()
console.log(router)
const { data } = useQuery(FETCH_BOARD, {
variables: { number: Number(router.query.number) }
})
console.log(data)
return (
<div>
<div>{data?.fetchBoard.number}번 게시글에 오신 것을 환영합니다!!</div>
<div>작성자: {data?.fetchBoard.writer}</div>
<div>제목: {data?.fetchBoard.title}</div>
<div>내용: {data?.fetchBoard.contents}번 게시글에 오신 것을 환영합니다!!</div>
</div>
)
}```
Author And Source
이 문제에 관하여(Static / Dynamic routing), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wony_yoon/Static-Dynamic-routing저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)