GatsbyLinkコンポーネントを使用してページ間を移動する

がGatsbyを使用して静的なウェブサイトを構築する基本を終えたので、その内部のいくつかを調べてみましょう。この投稿では、Gatsbyが内部でルーティングに使用する ReachRouterの下線付きのLinkコンポーネントをラップするGatsbyLinkコンポーネントについて説明します。

Link コンポーネントは、通常のアンカー（a）タグを使用する代わりに、Gatsbyサイトの内部ページ間を移動するために使用されます。通常のアンカーの代わりにLinkを使用する利点は、次のとおりです。

Gatsbyは、リンク先のコンテンツをインテリジェントに事前レンダリングします
リンク先のページに状態を渡すことができます
アクティブなページがリンクに対応している場合、カスタムスタイルまたはカスタムクラスをリンクに追加できます。
これはもう少し高度なユースケースですが、Linkコンポーネントを使用すると、ブラウザーの履歴オブジェクトを制御できます。

を使用する

リンクコンポーネントの使用は簡単です。インポートして、少なくともto小道具で使用します。これは、サイト上の相対パスを指している必要があります。

import React from 'react';
import { Link } from 'gatsby';

const AuthorCard = ({ author }) => {
  return (
    <div>
      <img src={author.avatar.children[0].fixed.src} alt={author.name} />
      <p>
        <Link to={`/author/${author.id}/`}>More posts</Link>
      </p>
    </div>
  );
};

export default AuthorCard;

アンカータグで通常使用する小道具を渡すこともできます。たとえば、titleをリンクに追加しましょう。

<Link
  to={`/author/${author.id}/`}
  title={`View all posts by ${author.name}`}
>
  More posts
</Link>

外部ドメインまたは同じドメイン上の別の非ギャツビーサイトにリンクする場合は、通常のアンカータグを使用します。

アクティブページ

スタイルオブジェクトまたはクラス名を使用して、アクティブなページのリンクのスタイルを変更できます。スタイルオブジェクトの場合は、activeStyle小道具を使用します。

<Link
  to={`/about/`}
  activeStyle={{ textDecoration: "salmon double underline" }}
>
  About Us
</Link>

代わりにクラス名を使用するには、activeClassNamepropを指定します。

<Link to={`/about/`} activeClassName="active">
  About Us
</Link>

ホームページへのリンク

ホームページを指すには、to小道具の値として/を使用します。

<Link to="/">Go home</Link>

通過状態

Linkコンポーネントはstateプロップも受け入れ、受信ページはlocation.stateでlocation propを介してそのプロップに渡されたものにアクセスできます。

<Link to="/" state={{returningVisitor: true}}>
  Go home
</Link>

`navigate`とプログラムでリンクする

Linkコンポーネントの機能を使用する必要があるが、JSXマークアップの外部でプログラムで使用する必要がある場合は、navigateヘルパー関数を使用できます。

import React from 'react';
import { navigate } from 'gatsby';

handleSubmit = e => {
  e.preventDefault();
  const form = e.target;

  // ...do stuff here to submit the form data
  // (e.g.: using the fetch API)

  // Then navigate to the path that corresponds to the form's
  // action attribute 
  navigate(form.getAttribute('action');
};

navigateは、オプションの2番目の引数を取ります。これは、stateを指定して渡すことができるオブジェクト、および/またはブラウザーの履歴を置き換える必要があるオブジェクトである必要があります。

navigate(form.getAttribute('action', {
  state: { message: 'Thanks a bunch!' },
  replace: true
});

`withPrefix`＆`pathPrefix`

本番サイトがサブディレクトリでホストされている場合は、サイトのgatsby-config.jsファイル内でpathPrefixの値を設定する必要があります。このようにして、Gatsbyは舞台裏にリンクするURLを正しく構築し、開発中と本番環境の両方でローカルで機能します。

withPrefixヘルパーメソッドを使用して、サイトのプレフィックスを手動で追加することもできます。これは、絶対パスが必要な場合に役立ちます。

import React from 'react';
import Helmet from 'react-helmet';
import { withPrefix } from 'gatsby';

const Index = props => {
  return (
    <>
      <Helmet>
        <link rel="icon" sizes="32x32" href={withPrefix('favicon-32x32.png')} />
        <link rel="icon" sizes="192x192" href={withPrefix('favicon-192x192.png')} />
        {/* More stuff here... */}
      </Helmet>

      <div className={props.className}>
        {props.children}
      </div>
    </>
  );
};

export default Index;

🔗これで、先に進んですべてのものへのリンクを開始できます！ GatsbyのLinkコンポーネントの詳細については、公式ドキュメントにアクセスしてください。