React SPAにfirebaseホスティングを使用して404ページを提供するにはどうすればよいですか？

Question

私は現在、単一ページのReactアプリケーションにfirebaseホスティングを使用しています。私はまた、404.htmlページを私のパブリックディレクトリに追加しました。私の前提は、ユーザーが自分のルートにない（反応ルータを使用している）URLを入力した場合にこのページが表示されるということですが、firebaseがURLが有効かどうかを知る方法はありません。現在、私の主なアプリケーションURLの/の後に何かランダムに入力すると、ページは空白になります。私のリアクションアプリ内でこれを説明する必要があるのでしょうか？

Answer 1

リアクタルーターは、クライアント側で404ページを処理できるようにすることができます。これは、どのようにすることができますセットアップ：キャッチすべてのルート（*）は、ルータが他のすべてを試し、最終的にこれに取得することができリアクト最後にそうでなければならないこと

var NotFound = React.createClass({ 
    render: function() { 
     return (<h1>Page Not Found</h1>); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
     <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <Route path="first" component={SomeComponent}/> 
       <Route path="second" component={SomeOtherComponent}/> 
       <Route path="*" component={NotFound}/> 
      </Route> 
     </Router> 
    } 

}); 

注意。

Here'sこれを説明する素敵な記事です。

Answer 2

これはfirebase.jsonの設定を使用して部分的に解決できますが、Firebaseホスティングは静的コンテンツのみを提供するため、JavaScriptのロジックの一部を処理する必要があります。 /users/fooが/index.htmlへのルートだろう、上記の例では

{ 
    "hosting":{ 
    "rewrites":[ 
     {"source":"https://stackoverflow.com/users/*","destination":"/index.html"}, 
     {"source":"/account","destination":"/index.html"}, 
     {"source":"/posts/*","destination":"/index.html"}, 
    ] 
    } 
} 

：しかし、あなたは、インスタンスのために、アプリケーションのルート構造を一致させるために、より具体的な書き換えを作成することができます

{ 
    "hosting":{ 
    "rewrites":[{"source":"**","destination":"/index.html"}] 
    } 
} 

：シンプルなキャッチオールは次のようになります/unknown/urlは404.htmlにルーティングされます。

上記はあなたのところにあるようですが、実際のアプリケーションデータについてはわかりません。 /users/fooが有効なユーザー名でない場合は、JavaScriptを使用して見つからないメッセージを/index.htmlに表示する必要があります。