前回はRemixのdocker-composeでのローカル環境構築を行いました。

今回は、Remixのページ遷移をやっていきたいと思います。

Remixのdocker-composeでのローカル環境構築についてはこちらを参照してください。

docker-composeでRemixの環境を構築する方法まとめ

この記事でやらないこと

• Remixの説明
• Remixの環境構築方法

この記事でやること

1. Remixのページ作成
2. Remixのページ遷移
3. Remixのパスパラメータを使ってのページ遷移
4. RemixのGetパラメータを使ってのページ遷移

1. Remixのページ作成

Remixではroutesディレクトリ配下にファイルを追加することでページを追加できます。

初期状態では下の画像のように _index.tsx のみが格納されています。これがでアクセスする最初のページになります。

まずはここにAboutページを作っていきます。

routesディレクトリにabout.tsxを作ります。このファイル名aboutがページへのURLパスになります。つまりabout.tsxファイルは /about でアクセスすることができます。

ブラウザで localhost:5371/about にアクセスしてみます。

2. Remixのページ遷移

画面からaboutページにアクセスする方法を解説します。

Remixのページ遷移はReactのページ遷移そのものです。Linkを使います。

<Link to="パス">パスへ遷移する</Link>

_index.tsxを以下のようにします。

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <Link to='/about'>Aboutページへ</Link>
    </div>
  );
}

画面ではこのような状態になります。

画面上のリンクAboutページへをクリックすると、/about に遷移します。

3. Remixのパスパラメータを使ってのページ遷移

パスパラメータとは次のようなパスを言います。

localhost:5371/posts/12345

パスの中にIDなど変数が入るパスですね。上の例だと12345がIDになります。

2と同じようにファイルを作っていきます。ファイル名はposts.$postId.tsxとなります。

パスパラメータは useParams を使って拾います。

const params = useParams();
const postId = params.postId;

このファイルへの遷移パスは/posts/:postIdとなります。

_index.tsxを以下のようにします。

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <Link to='/about'>Aboutページへ</Link>
      <br />
      <Link to='/posts/123'>Postページへ</Link> # ここを追記
    </div>
  );
}

画面ではこのような状態になります。

Postページをクリックするとこんなページに遷移します。

画面上の123が、パスパラメータの123に連動します。試しにこの部分を12345に変えてみましょう。

4. RemixのGetパラメータを使ってのページ遷移

最後に、Getパラメータを渡す方法を解説します。

パラメータを渡す側を作ります。

遷移先のページを作ります。Getパラメータの取得はuseLocationとURLSearchParamsを使います。

const search = useLocation().search;
const query = new URLSearchParams(search);
const commentId = query.get("commentId");

画面ではこんな感じになります。Getパラメータが画面に表示されていることがわかります。