Gatsby:Linkラベル

4414 ワード
gatsby テキストリンク
GatsbyのPagesフォルダにファイルを作成すると、ページに直接アクセスできるURLが作成されます.
例)ページフォルダにinfoを入力します.tsxファイルがあれば、http://localhost:8000/info」羅に直接アクセスできます.
したがって、タグへのショートカットを次のように作成できます.
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では、ページをロードすると、そのページで使用されているすべてのリンクタグが検索され、そのリンクに対応するページ(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
CRAなしでの反応優先パラメータの設定
[C言語伯俊]2884目覚まし時計