Zenn
🥝

[Vite, React] マルチページ（複数ページ）の対応方法

2024/01/24に公開
React
個人開発
Vite
#
app
tech

概要

Vite, React で構成されたSPAでのマルチページの対応方法です。
マルチ（複数）ページとは /index.html と /second/index.html のような構成を指します。

基本的にはViteの公式ドキュメントと同様に設定します。

開発環境

以下の環境で構築するアプリケーションが対象です。

  • React
  • TypeScript
  • Vite

ディレクトリ構成

project/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── second
│    ├── index.html
│    └── main.tsx
├── index.html
└── src/
     ├── components/
     │    └── ...
     ├── App.tsx
     ├── Second.tsx
     └── main.tsx

対応方法

1. vite.config.tsの設定

※ 関連箇所のみ抜粋

vite.config.ts
import { defineConfig } from "vite";
import path, { resolve } from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// https://vitejs.dev/config/
export default defineConfig({
  root: resolve(__dirname, "./"),
  build: {
    outDir: resolve(__dirname, "dist"),
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        second: resolve(__dirname, "second/index.html"),
      },
    },
  },
  ...
});

root: importを絶対パスで記述するために必要

2. tsconfig.jsonの設定

tsconfig.json
{
  ...
  "include": ["src", "second"],
  ...
}

3. 別ページのhtmlとエントリー

/second/index.html
<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="second"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

/second/main.tsx は/src/main.tsxとほぼ同じです。

/second/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import Second from "../src/Second";

ReactDOM.createRoot(document.getElementById("second")!).render(
  <React.StrictMode>
    <Second />
  </React.StrictMode>
);

以上でマルチ（複数）ページの対応は完了です 🎉

例えば、 /second/index.html の場合、
開発環境であれば http://localhost:5173/second/ になります。

URLにパラメータを付けたい場合、
http://localhost:5173/second/?theme=dark&size=small などになります。

Discussion