Astro のルーティングとページナビゲーション

はじめに

Astro では、ウェブサイト内のページ間の移動を管理するためにルーティングを使用します。このセクションでは、Astro のファイルベースのルーティングシステムの基本、ページ間ナビゲーションの作成方法、およびダイナミックルーティングの実装について、具体例を交えて説明します。

Astro のルーティングシステム

Astro のルーティングは、src/pagesディレクトリ内のファイル構造に基づいています。各ファイルはウェブサイトの特定のパスにマッピングされ、そのパスにアクセスすると、対応するファイルがレンダリングされます。

例: 基本的なページの作成

src/pagesディレクトリ内にabout.astroファイルを作成します。これにより、/aboutパスでアクセスできる「About」ページが作成されます。

---
// ここにページ固有のロジックを書く
---
<h1>About Page</h1>
<p>This is the about page of our website.</p>

ページ間ナビゲーション

Astro では、<a>タグを使用して、ページ間でのナビゲーションリンクを作成します。

例: ナビゲーションバーの作成

src/components/Navbar.astroファイルを作成し、以下のように記述してナビゲーションバーを作成します。

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

このナビゲーションバーを、サイトの複数ページに含めることで、ユーザーがページ間を簡単に移動できるようになります。

ダイナミックルーティング

Astro では、ブログ投稿や製品ページなど、パラメータを使ったダイナミックなルーティングを設定することができます。

例: ブログ投稿のダイナミックルーティング

src/pages/blog/[slug].astroファイルを作成します。このファイル名の[slug]は、各ブログ投稿の一意の識別子（スラッグ）に置き換えられます。

---
const {slug} = Astro.request.params;
const post = findPostBySlug(slug); // `findPostBySlug`は、スラッグに基づいて投稿を検索する関数です（実装は省略）
---
<h1>{post.title}</h1>
<article>{post.content}</article>

この設定により、例えば/blog/my-first-postのような URL でブログ投稿にアクセスできるようになります。各 URL のmy-first-post部分が[slug]にマッピングされ、対応するブログ投稿をレンダリングします。