AmplifyでReact Routerが上手くいかない時に・・・

AmplifyはSPAのホスティングがメインかと思いますが、複数のページのホスティング&ルーティングすることができます。

React Routerの設定/CLI操作からだけだと実現できずAWSのコンソール操作が必要になります。

やること

全てのリクエストが/index.html にリダイレクト(リライト)してあげるようにする。

reactはsrc/App.jsで解釈したものをpublic/index.html にレンダリングするので、この設定が必要になります。

これによって、Reactアプリはサーバー側で個別のページを持たずに、すべてのルーティングをクライアントサイドで処理できるようになります。

サンプルコード

・Reactのコード（App.js）

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Go from './Go';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/go" element={<Go />} />
      </Routes>
    </Router>
  );
}

export default App;

index.htmlは基本的にそのままで問題ありません。

Amplifyコンソールで設定する値

アプリ設定 > 書き換えとリダイレクト　にて以下のJsonを追加し保存

[ { "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|xml)$)([^.]+$)/>", "target": "/index.html", "status": "200" } ]
リダイレクトを使用する>単一ページのウェブアプリケーション (SPA) のリダイレクト

コンソールで設定するだけで、追加でデプロイは必要ありません。

上記にて、React Routerにて指定したファイルにアクセスできます。