Routing

루트에 컴포넌트(component)파일을 만들고, 그 안에 NavBar.js를 만들어서

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

이런 식으로, 코드를 짜면, a태그를 사용하지 말라고 문제가 생긴다. 이유는 a태그를 통해 이동하면 새로고침이 되기 때문이다.

그래서

import Link from 'next/link'

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

이런 식으로 Link를 import해와서 Link태그로 a태그를 감싸고 href를 Link태그에 써주면 된다.

이 Link태그는 오로지 href를 위한 것이고, style나 className은 a태그에 넣어주면 된다.

 

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

export default function NavBar() {

    const router = useRouter();

    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>
}

그리곤, useRouter을 이용하면 url경로에 대해 남는데, 거기서 pathname을 활용하면 /에 있을 때, 아닐 때 style을 줄 수도 있다.