Link 链接组件 #

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

function Example() {
  return (
    <Link href="https://chakra-ui.com" isExternal>
      Chakra UI
    </Link>
  )
}

<Link color="blue.500">蓝色链接</Link>
<Link color="teal.500">青色链接</Link>
<Link color="purple.500">紫色链接</Link>

<Link href="https://google.com" isExternal>
  Google <ExternalLinkIcon mx="2px" />
</Link>

<Link variant="underline">下划线链接</Link>
<Link variant="plain">普通链接</Link>

<Link
  href="#"
  color="blue.500"
  _hover={{
    color: 'blue.600',
    textDecoration: 'underline',
  }}
>
  自定义悬停效果
</Link>

function NavLink({ href, children, isActive }) {
  return (
    <Link
      href={href}
      px={3}
      py={2}
      borderRadius="md"
      color={isActive ? 'blue.500' : 'gray.600'}
      bg={isActive ? 'blue.50' : 'transparent'}
      _hover={{
        bg: 'blue.50',
        color: 'blue.500',
      }}
    >
      {children}
    </Link>
  )
}

function LinkList({ links }) {
  return (
    <HStack spacing={4}>
      {links.map((link) => (
        <Link
          key={link.href}
          href={link.href}
          color="gray.600"
          _hover={{ color: 'blue.500' }}
        >
          {link.label}
        </Link>
      ))}
    </HStack>
  )
}

import { Link as RouterLink } from 'react-router-dom'

<Link as={RouterLink} to="/about">
  关于我们
</Link>