ルーティング

Qwik フレームワークにおけるルーティングについて、具体的な例を用いて学びます。ここでは、シンプルなブログアプリケーションを例に、異なるページへのナビゲーションを実装する方法を説明します。

ブログアプリケーションのルーティング

目的

複数のページ（例えば、ホームページ、ブログ記事一覧、記事詳細ページ）を持つブログアプリケーションを通じて、Qwik におけるルーティングの設定方法とページ間でのナビゲーションの実装を理解します。

実装ステップ

  1. ルーティングの設定:
    • Qwik プロジェクトでルーティングを設定するために必要なファイル構成と設定方法を説明します。
  2. ページコンポーネントの作成:
    • ホームページ、ブログ記事一覧ページ、記事詳細ページのためのコンポーネントを作成します。
  3. ナビゲーションリンクの設定:
    • ユーザーがページ間をナビゲートできるように、ナビゲーションリンクを設定します。

コード例

  1. ルーティングの設定:

Qwik では、ルーティングを設定するために、routes.tsxファイル（または任意の名前）にルート定義を記述します。

// src/routes.tsx
import { QwikCity } from '@builder.io/qwik-city';
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <QwikCity
      routes={{
        '/': () => import('./pages/Home'),
        '/blog': () => import('./pages/BlogList'),
        '/blog/:id': () => import('./pages/BlogDetail'),
      }}
    />
  );
});
  1. ホームページコンポーネント:
// src/pages/Home.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <div>Welcome to our blog!</div>;
});
  1. ブログ記事一覧ページコンポーネント:
// src/pages/BlogList.tsx
import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
  const store = useStore({ posts: [{ id: 1, title: 'First Post' }] });

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {store.posts.map((post) => (
          <li><a href\={`/blog/${post.id}`}>{post.title}</a></li>
        ))}
      </ul>
    </div>
  );
});
  1. 記事詳細ページコンポーネント:
// src/pages/BlogDetail.tsx
import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
  const store = useStore({
    post: { id: 1, title: 'First Post', content: 'Hello, world!' },
  });

  return (
    <div>
      <h1>{store.post.title}</h1>
      <p>{store.post.content}</p>
    </div>
  );
});