Link

접근 가능한 내비게이션을 제공하는 컴포넌트예요. 프레임워크 라우팅 라이브러리와도 손쉽게 연동할 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Link } from "@chakra-ui/react"

<Link href="...">Click here</Link>

예제 (Examples)

변형 (Variants)

variant prop을 사용해 Link 컴포넌트의 모양을 변경해요.

텍스트 안에서 (Within Text)

텍스트 안에서 Link를 사용해 하이퍼링크를 만들어요.

외부 (External)

Link 컴포넌트에 외부 링크 아이콘을 추가해요.

가이드 (Guides)

라우팅 라이브러리 (Routing Library)

asChild prop을 사용해 Link를 (Next.js 같은) 프레임워크 링크와 조합해요.

import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"

const Demo = () => {
  return (
    <ChakraLink asChild>
      <NextLink href="/about">Click here</NextLink>
    </ChakraLink>
  )
}

aria-current="page"를 사용할 때 _currentPage 조건을 사용해 활성 링크에 스타일을 적용해요.

<Link
  href="/home"
  aria-current="page"
  _currentPage={{ color: "blue.500", fontWeight: "bold" }}
>
  Home
</Link>

라우팅 라이브러리에서는 현재 라우트에 따라 aria-current를 설정해요:

import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
import { usePathname } from "next/navigation"

const NavLink = ({ href, children }) => {
  const pathname = usePathname()
  const isActive = pathname === href

  return (
    <ChakraLink asChild>
      <NextLink
        href={href}
        aria-current={isActive ? "page" : undefined}
        _currentPage={{ color: "blue.500", fontWeight: "bold" }}
      >
        {children}
      </NextLink>
    </ChakraLink>
  )
}

Props

Link 컴포넌트의 Link 부분에 대한 prop 테이블 (대화형 문서 참고).

더 알아보기 (Learn more)