next.js에서 버튼 누를 시, url 이동하기 리디랙션(redirect)

리액트에서 버튼 누를시 다른페이지로 이동하는것을 보여주겠다.

 

next/link 패키지를 사용하여 리디렉션 기능을 생성할 수 있습니다.

다음은 "/home"에서 "/p2p"로 리디렉션하는 예제 코드입니다:
          
        
이 예제에서는 Next.js에서 Link와 useRouter 컴포넌트를 가져옵니다. useRouter 훅을 사용하여 라우터 객체에 액세스하여 프로그래밍 방식으로 탐색할 수 있습니다.

 

handleLinkToP2P 함수는 버튼 클릭시 호출되고, 이때 router를 통해 리디랙션을 할 수 있습니다. push로 하면 뒤로가기고 원래있던 home으로 올 수 있습니다.

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const Home = () => {
  const router = useRouter();

  const handleLinkToP2P = () => {
    router.push("/p2p");
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleLinkToP2P}>Go to P2P</button>
    </div>
  );
};

export default Home;