Vite + React ファイルベースルーティング導入

はじめに

前提条件: Vite を使って、npm run dev コマンドでサーバーが立ち上がっている状態
目標: /pages/index.tsx がブラウザで表示されること

必要なパッケージ

• @vitejs/plugin-react
• react-router-dom
• @generouted/react-router
• generouted

https://github.com/vitejs/vite-plugin-react
https://github.com/remix-run/react-router
https://github.com/oedotme/generouted

設定と使用方法

ターミナル

npm install @vitejs/plugin-react react-router-dom @generouted/react-router generouted

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/react-router'

export default defineConfig({ plugins: [react(), generouted()] })

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Routes } from 'generouted/react-router'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
)

src/pages/index.tsx

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

実際にページを表示して動作確認

npm run dev コマンドでサーバーを起動し、pages/index.tsx が表示されていれば完了です。