Router / Routing

Router 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체임
➡️ 이 객체를 사용해서 페이지로 이동할때 페이지 이동을 라우팅한다 라고 말하는 것

Router : URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 하는데 리액트에서 라우팅 기능을 구현하기 위해서는 React Router로 라우팅 기능하도록 도와준다.

Next.js 라우터 종류와 기능: https://nextjs.org/docs/api-reference/next/router

자주 사용하는 라우터 객체기능.

    const handleClickPathname = () => {
        const pathname = Router.pathname
        alert(**pathname**)
    }

    const handleClickAsPath = () => {
        const asPath = Router.asPath
        alert(**asPath**)
    }

    const handleClickBack = () => {
        Router.**back**()
    }

    const handleClickPush = () => {
        Router.**push**('/')
    }

    const handleClickReload = () => {
        Router.**reload**()
    }

    const handleClickReplace = () => {
        Router.**replace**('/')
    }

    return (
      <>
        <button onClick={handleClickPathname}>현재 위치 주소: **Router.pathname**</button><br/>
        <button onClick={handleClickAsPath}>현재 위치 주소: **Router**.**asPath**</button><br/>
        <button onClick={handleClickBack}>뒤로가기 버튼: **Router**.**back**()</button><br/>
        <button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: **Router.push()**</button><br/>
        <button onClick={handleClickReload}>새로고침: **Router**.**reload**()</button><br/>
        <button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: **Router**.**replace**()</button><br/>
      </>
    )
  }

라우팅 실습

페이지 이동 - 이동하기 버튼을 누르면 페이지2로 이동
useRouter을 next에서 router 를 받아와서 import

import { useRouter } from 'next/router'
export default function StaticRoutingPage(){
// 호이스팅에서 선언식보다 표현식이 안전성이 있다. 화살표함수가 더 간단해서 쓴다.
    const onClickMove = () =>{
        router.push('/05-02-static-routed')
    }
    const router = useRouter()
    return (
        <>
            <button onClick={onClickMove}> 페이지를 이동합니다.</button>
        </>
    )
}

export default function StaticRoutedPage(){
    return (
        <>
            페이지 이동완료!
        </>
    )
}