react-server というフレームワークのルーティング方法についてまとめました。

react-server - Define routes

ルーティングの設定方法

ファイルベースのルーティング

ファイルベースのルーティングとは、ディレクトリの構成やファイル名でルーティングを設定する方法です。

少し前はDynamic routingと呼ばれていたような気がしますが、現在はfile-system routingと呼ばれるようになったっぽいです。

react-server.config.mjs

ルートディレクトリに、このファイルを作成し、

export default {
  root: "pages",
}

と書きます。

pages/index.jsx

export default function App() {
  return <h1>Hello World</h1>
}

ローカルサーバーのコマンド

npx react-server

http://localhost:3000などに接続して表示されれば OK です。

使い方

従来の Pages ルーターと App ルーター、どちらの書き方をしても使えるようです。

自分は pages の方が分かりやすいので、以下のようなディレクトリ構成にしました。

ディレクトリ構成

結果

こういったページが表示できるようになります。

http://localhost:3000

http://localhost:3000/about

http://localhost:3000/posts

http://localhost:3000/posts/1動的なパラメータのページ

index.jsx か page.jsx でインデックスルートになる

インデックスルートとは、ディレクトリに対応するデフォルトのルートページを指します。

このフレームワークでは、pages/posts.jsxとpages/posts/index.jsxは結果として同じルーティングが生成されました。

ただの HTML などの時は、末尾が/で終わるパターンと、/がつかないパターンで違うような記憶ですが、このフレームワークでは/なしで統一され、/を付けたページにアクセスしても 404 にならず、リダイレクトしてくれています。

パラメーターの使い方

ファイル名を[id].jsxとすることでパラメーターを使うことができ、idという Props で使うことができるようになります。

pages/posts/[id].jsx

export default function Post({ id }) {
  return <h1>Post ID: {id}</h1>
}

http://localhost:3000/posts/1にアクセスすると、

Post ID: 1

が表示されます。

ちなみに、App ルーターの書き方、

pages/posts/[id]/index.jsxでも同様に動きます。

複数のパラメーターの使い方

ファイル名を[id]-[name].jsxと-で繋いで

export default function Post({ id, name }) {
  return (
    <h1>
      Post ID: {id}
      {name}
    </h1>
  )
}

同様に、Props で使用できます。

http://localhost:3000/posts/1-名前にアクセスすると、うまくパラメーターが使えていることが分かります。

ちなみに

http://localhost:3000/posts/1/名前というルーティングにしたいとすると、

pages/posts/[id]/[name]/index.jsxというディレクトリ構成にすれば良いです。

Props で使用する方法は同じでした。

以上、誰かの参考になれば幸いです。