ルーティングとページ

Remix では、routesディレクトリを使用してアプリケーションのルーティングとページを構成します。このセクションでは、基本的なルーティングの設定から、動的ルーティング、リンクとナビゲーションの管理まで、具体例を用いて説明します。

基本的なルーティングとページの作成

ステップ 1: ホームページの作成

  • app/routes/index.jsxファイルを作成または編集して、ホームページのコンポーネントを定義します。
export default function Index() {
  return (
    <div>
      <h1>ホームページ</h1>
      <p>Remix アプリへようこそ！</p>
    </div>
  );
}

ステップ 2: 新しいページの追加

  • app/routes/about.jsxファイルを新規作成し、別のページを定義します。
export default function About() {
  return (
    <div>
      <h1>私たちについて</h1>
      <p>これは、Remix アプリの紹介ページです。</p>
    </div>
  );
}

動的ルーティング

  • app/routes/posts/$postId.jsxファイルを作成して、動的なパラメータを持つページを定義します。
import { useParams } from 'remix';

export default function Post() {
  let { postId } = useParams();
  return (
    <div>
      <h1>記事 {postId}</h1>
      <p>これは動的に生成されたページです。</p>
    </div>
  );
}

リンクとナビゲーションの管理

  • Link コンポーネントを使用して、ページ間のナビゲーションを追加します。
  • app/routes/index.jsxにLinkを追加してみましょう。
import { Link } from 'remix';

export default function Index() {
  return (
    <div>
      <h1>ホームページ</h1>
      <nav>
        <ul>
          <li>
            <Link to='/about'>私たちについて</Link>
          </li>
          <li>
            <Link to='/posts/1'>記事 1</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

この例では、Link コンポーネントを使用して、/about と /posts/1 へのリンクを作成しています。これにより、ページ間でのナビゲーションが可能になり、ユーザーがアプリケーション内をスムーズに移動できるようになります。