Gatsby: Link 태그

Gatsby에서 pages 폴더에 파일을 생성하면 바로 이 페이지로 갈 수 있는 url을 만들어준다.
예시) pages 폴더에 info.tsx파일 있는 경우, 'http://localhost:8000/info'로 그냥 들어갈 수 있음.

따라서 다음과 같이 a 태그로 바로가기 만들 수 있음.

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'

const IndexPage: FunctionComponent = function () {
  return <div>
    <Text text="Home" />
    <a href="/info/">To InfoPage</a>
  </div>
}

export default IndexPage

Gatsby Link API

Gatsby에서는 페이지를 로드하면 이 페이지에 사용된 Link태그를 다 찾아서 미리 그 링크에 해당되는 페이지를 로드한다(Prefetch). 그래서 엄청 빠르다.

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'
import { Link } from 'gatsby'

const IndexPage: FunctionComponent = function () {
  return <div>
    <Text text="Home" />
    <Link to="/info/">To InfoPage</Link>
  </div>
}

export default IndexPage

참고
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/lecture/76339?tab=note&mm=close