📦 SeolJaeHyeok / start-to-next

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import Link from "next/link";
import { useRouter } from "next/router";

const NavBar: React.FC = () => {
  const router = useRouter();
  return (
    <nav>
      <Link href='/'>
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href='/about'>
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>
      <style jsx>{`
        .active {
          color: tomato;
        }
      `}</style>
    </nav>
  );
};
export default NavBar;