Reactは使いたいけど、Nextはちょいややこしくて使いたくはないかも。でもReactは404ステータス返せないしなぁな問題を解決できたかもしれないのでメモ。
実際に作ったサイト↓
ソースコードはここに置いてます。
Astroの中でReactを使うことができるので、それを利用して作ってみようと思った次第です。ViteだしNextと比べても早いんじゃないかなしらんけど。
使い方としては、pagesディレクトリ配下にページ分のastroを作る。
その中で共通のReact Routerコンポーネントを呼び出す。
---
import Layout from "@/layouts/Layout.astro";
---
<Layout />
Layoutはこんな感じ
---
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はつける必要がある。たぶん。
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 Main = (): 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 Routerでページ遷移はできて、存在しないページにアクセスした場合は、pages配下にファイルがないため404を返してくれる。
HAPPYだ!