[解決済み] awsのs3バケットでreact routerが動作しない。

質問

Reactのウェブサイトをデプロイしたのですが build/ フォルダをAWSのS3バケットに展開しました。

もし私が www.mywebsite.com をクリックすると動作します。 a タグをクリックすると、プロジェクトと会社概要のページが表示され、正しいページに導かれます。 しかし、ページのURLをコピーして送信したり、次のようなリンクに直接アクセスしたりすると、そのページが表示されません。 www.mywebsite.com/projects のように直接リンクに行くと、404が返されます。

以下は私の App.js のコードです。

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);

どのように解決するのですか？

2020年5月1日に更新しました。

この投稿はかなりアクティブなので、私は答えを更新する必要があります。

つまり、問題を解決するためにいくつかの選択肢があります。

1. あなたは index.html の中に エラー文書 ボックスの中に入れてください (Alan Friedman が提案したように)。
   • あなたのバケツ (実際にコードがあるもの - リダイレクトに使うものではない) に移動します -> プロパティ -> 静的ウェブサイトホスティング :
   • これは、"hacky" ではないが、それは方法のために動作します。 react-router が機能しているからです。これは、フロントエンドからのリクエストを処理し、ユーザーを他のルーティングにルーティングします。 しかし、全体としては、React アプリは単一ページです。 アプリケーションです。
   • サーバーサイドのReactが必要な場合は Next.js .

1. 指定のエラーファイルを置くことができる error.html の中に 公開 フォルダに、Reactアプリの 静的ウェブサイトホスティング : エラー文書 のボックスの中に、入れてください。 error.html . これも動作します。テストしてみました。

2. 使用方法 AWS CloudFront > CloudFrontディストリビューション >バケットのディストリビューション > エラーページ と入力し、必要なエラーコードを追加してください。もし、あなたが react-router を使わない場合 (下の例のように)、Bucket の応答は エラー 403 で応答するので エラー.html .

1. のために TypeScript の場合、現在 react-router はそれをサポートしていませんので オプション 2 と 3 . 彼らは将来のバージョンでライブラリを更新するつもりです。 6.* によると このスレッド .