Remix の Version 2 系を使用した React アプリで、特定のページにアクセスすると404エラーが発生する問題が発生しました。原因と対応について調査して簡単にまとめたので紹介します。

発生した症状

• /auth/sign-in へのアクセス → 404 Not Found
• /auth/sign-up へのアクセス → 404 Not Found
• 開発サーバー（npm run dev）は正常に起動している
• 他のページは正常にアクセス可能

環境

• Remix V2.15.3
• Vite 6.0.0
• @remix-run/dev V2.15.3
• Node.js 20.x
• Cloudflare Pages対応構成

原因

問題の根本原因は、Remix のファイルベースルーティング規則の変更にありました。

従来のファイル構造（動作しない）

app/
  routes/
    auth/
      sign-in.tsx    # /auth/sign-in として認識されない
      sign-up.tsx    # /auth/sign-up として認識されない

Remix V2での正しいファイル構造

app/
  routes/
    auth.sign-in.tsx  # /auth/sign-in として認識される
    auth.sign-up.tsx  # /auth/sign-up として認識される

Remix V2では、ネストされたディレクトリ構造（routes/auth/sign-in.tsx）が自動的にルートとして認識されなくなり、代わりにフラットファイル構造でドット記法を使用する必要があります。

対応

1. ファイルの移動とリネーム

# 既存のファイルを移動・リネーム
mv app/routes/auth/sign-in.tsx app/routes/auth.sign-in.tsx
mv app/routes/auth/sign-up.tsx app/routes/auth.sign-up.tsx

# 空になったディレクトリを削除
rmdir app/routes/auth

2. 開発サーバーの再起動

ファイル構造の変更を反映するため、Remix開発サーバーを再起動します。

# 既存のプロセスを停止
pkill -f "remix vite:dev"

# 開発サーバーを再起動
npm run dev

3. 動作確認

# HTTPステータスコードの確認
curl -s -o /dev/null -w "%{http_code}" http://localhost:5173/auth/sign-in
# 200 が返されることを確認

curl -s -o /dev/null -w "%{http_code}" http://localhost:5173/auth/sign-up
# 200 が返されることを確認

参考情報

• Remix V2 Migration Guide
• File Conventions – Remix Docs