アドレスバーを使用して単一のページアプリケーションにユーザをルーティングする

Question

expressを使用して静的ディレクトリを提供するバックエンドが、/にあります。そこには単一ページのフロントエンドが含まれています。このバックエンドはAPI RESTも提供します。

フロントエンドはReactで構築され、リアクションルータを使用してWebアプリケーションのさまざまなビューからユーザーをルーティングします。私の反応-ルータの場合

は、2つのエントリを持っているユーザーは、Webブラウザのアドレスバーに直接URLを入力した場合、私は、アプリケーションのビューにクライアントをリダイレクトすることができますどのように/appと/config、

を言わせて？

現時点では、Expressはリクエストを受け取り、単一ページが/パスに配信されるため、明らかに404メッセージを返します。

Answer 1

これを解決する簡単な方法は、常に（404でも）エクスプレスルートハンドラにindex.htmlをユーザに送信することです。

参照：https://stackoverflow.com/a/25499007/2624575

は、しかし、あなたはいくつかの世話をする必要があります。

1）あなたは、ルータコードを反応させるのは、404エラーを処理するために開始する必要があります：https://stackoverflow.com/a/37491381/2624575

2）あなたが正しく処理する必要がありますあなたの資産（アイコン、CSS、jsなど）へのパス。そうでなければ、同じ種類のリソースに同じindex.htmlを送信します（ページが正しくレンダリングされません）。

3）幸いなことに、react-routerはbrowserHistory（ハッシュを使用しない履歴#）を使用しています。このようにして、経路は正しく表示されます。