がGatsbyを使用して静的なウェブサイトを構築する基本を終えたので、その内部のいくつかを調べてみましょう。 この投稿では、Gatsbyが内部でルーティングに使用する ReachRouterの下線付きのLinkコンポーネントをラップするGatsbyLinkコンポーネントについて説明します。
Link コンポーネントは、通常のアンカーを使用する代わりに、Gatsbyサイトの内部ページ間を移動するために使用されます(a
)タグ。 通常のアンカーの代わりに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>
代わりにクラス名を使用するには、 activeClassName
小道具:
<Link to={`/about/`} activeClassName="active">
About Us
</Link>
ホームページへのリンク
ホームページを指すには、 /
の値として to
小道具:
<Link to="/">Go home</Link>
通過状態
The Link
コンポーネントは、 state
小道具、および受信ページは、を介してその小道具に渡されたものにアクセスできます location prop
、 で location.state
:
<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
本番サイトがサブディレクトリでホストされている場合は、サイト内のpathPrefixに値を設定する必要があります。 gatsby-config.js
ファイル。 このようにして、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’sの詳細については、 Link
コンポーネントについては、公式ドキュメントにアクセスしてください。