[NextJS] Routing

Routing

components/NavBar.js

import Link from "next/link";

export default function NavBar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

pages/index.js

import NavBar from "../components/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>Hello</h1>
    </div>
  );
}

 

useRouter()

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

export default function NavBar() {
    const router = useRouter();
    // useNavigate 같은 역할인듯?

  return (
    <nav>
      <Link href="/">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>About</a>
      </Link>
    </nav>
  );
}

 

 

<Link> tag를 썼음에도 불고 하고 <a> 태그로 문자열을 감싸주는 이유가 뭘까?

1. Link 태그에 그냥 문자열을 넣었을 경우 자동으로 a태그로 감싸주는데

이 기능 지원을 곧 중단할 거기 때문에 a태그를 넣어서 만드는 게 더 안전하다.

• Deprecated. Warning shown by propType check. If the children provided is a string (example) we wrap it in an tag

2. 태그 없이는 style이나 className을 줄 수 없다.