AstroでReact Routerを使用してハード404なCSRを作ってみた

Reactは使いたいけど、Next.jsはちょいややこしくて使いたくはないかも。でもReactは404ステータス返せないしなぁなときに使えるメモ。

Astroの中でReactを使うことができるので、それを利用して作ってみようと思った次第です。

使い方としては、pagesディレクトリ配下にページ分のastroを作る。

その中で共通のReact Routerコンポーネントを呼び出す。

pages配下のastroファイル
---
import Main from "@/Main.astro";
---

<Main />

Mainはこんな感じ

Main.astro
---
import { Router } from "@/routes/Router";
---

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
	</head>
	<body>
		<Router client:only />
	</body>
</html>

client:onlyはつける必要がある。

Router.tsxも作ります。

Router.tsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Home } from "@/routes/pages/Home";
import { Portfolio } from "@/routes/pages/Portfolio";
import { Works } from "@/routes/pages/Works";
import { Links } from "@/routes/pages/Links";
import { About } from "@/routes/pages/About";
import { NotFound } from "@/routes/pages/NotFound";

export const Router = (): JSX.Element => {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/portfolio" element={<Portfolio />} />
				<Route path="/contact" element={<Contact />} />
				<Route path="/works" element={<Works />} />
				<Route path="/links" element={<Links />} />
				<Route path="/about" element={<About />} />
				<Route path="*" element={<NotFound />} />
			</Routes>
		</BrowserRouter>
	);
};

ここで呼び出すコンポーネントはそれぞれReactで作ったページのコンポーネントを呼び出してください。Astroとルーティング用ファイルとReactとで二重になるのがちょっとめんどくさいところ。

するとReact Routerでページ遷移はできて、存在しないページにアクセスした場合は、pages配下にファイルがないため404を返してくれる。