chiko
101
2021-11-04 18:38:02
2
94

리액트(Next.js) Link태그 이용해서 컴포넌트 들어가는 방법은 없나요?


게시글 작성 page가 있고, button을 Link 태그로 감싸서 게시글 작성 button을 눌렀을 때 게시글 작성 component로 이동되게요 ㅜ
0
  • 답변 2

  • 페코옹
    1k
    2021-11-05 12:35:34

    기본적으로 next js Link컴포넌트는 page단위로 이동하게 되어 있어요.

    page 단위로 이동한다는 말은 page url이 바뀐다는 거죠.

    그래서 아래 처럼 하시면 됩니다.


    import type { NextPage } from "next";
    import Head from "next/head";
    import React from "react";
    import Link from "next/link";
    import { useRouter } from "next/dist/client/router";

    const A = () => <div>A</div>;

    const B = () => <div>B</div>;

    const C = () => <div>C</div>;

    const TestNextPage = () => {
      const {
        query: { location },
      } = useRouter();

      return (
        <div>
          <Head>
            <title>Create Next App</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <Link href="/test?location=a">
            <button>a</button>
          </Link>
          <Link href="/test?location=b">
            <button>b</button>
          </Link>
          <Link href="/test?location=c">
            <button>c</button>
          </Link>
          {location === "a" && <A />}
          {location === "b" && <B />}
          {location === "c" && <C />}
        </div>
      );
    };

    export default Test;


  • chiko
    101
    2021-11-11 20:26:59

    감사합니다!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.