反応中の404を処理する方法

Question

React JSで不正なルート404応答を処理し、デフォルトのルートコンテキストにルーティングする方法。

私は<Route path='*' component={Home} />を使用しようとしましたが、それは働いていないと404

Answer 1

を与える間違ったパスのためにあなたは、ルータのredirectを反応させ使用する必要があります。あなたのケースでは

あなたは、ルーティングが、すべての要求のために、あなたがする必要があり、応答インデックスファイルをレンダリングするサーバ側を実装していないため/を使用している場合、それは<Redirect from="*" to path="/" />

Answer 2

だろう。あなたのクライアントルートで

router.all('*', (req, res) => { res.response('index'); }) 

し、このリダイレクトを入れ、最後

<Redirect from="*" to="/" /> 

あなたは#を使用している場合は、サーバーの一部

Answer 3

気にしない私はあなたが少しより多くを与えるべきだと思います情報。あなたが今までに得た答えは、あなたが指定しなかった仮定になりました。私はindex.htmlを提供しているものが何であるかを知りたいと思っています.404で何を意味していますか？あなたのルートは一致していませんか？反応ルータのどのバージョンを使用していますか？ webpack dev serverやdevミドルウェアが混在していますか？

あなたはWebPACKの-devのサーバーを使用している場合は、私はfollwingがあなたの設定ファイル

であることを確認してください。..

をここに役割を果たしているが、必要であれば、あなたがより多くを指定した後、私の答えを変更します後者を想定しています

devServer: { 
    historyApiFallback: true, <- falls back to index.html if path is not routed 
    publicPath: '/', <- where the bundle is 
} 

あなたの出力をconfigコンWebPACKの中で確認してくださいあなたはHtmlWebpackPluginを使用していない場合はpublicPath

output: { 
    path: path.sesolve(__dirname, 'dist') <- absolute path where the bundle is 
    publicPath: '/' <- makes sure HtmlWebpackPlugin injects '/' before bundle.js in output index.html 
} 

があり、その後必ずあなたのindex.htmlを参照を作りますバンドルだけでなく、 '/bundle.js'

ノードにWebpack-devミドルウェアを使用してインデックスとバンドルを提供する場合は、/ buildまたは/ distディレクトリではなくメモリから提供されていることに注意してください。

問題が反応ルータの場合は、私は404の問題を理解していません。あなたのルートと一致していないということですか？ react-router v4を使用して最新のベータテストを行っている場合は、最新のもの（4.0.0-beta.6）とそれ以前のものとの間にいくつかの変更があります。非マッチしたルートをキャッチするルータV4の使用では

この：

<Switch> 
    <Route exact path="/" component={Home}/> 
    <Route exact path="/someroute" component={SomeComponent}/> 
    <Route component={NoMatchedRouteComponent}/> <- Catches "404" and redirects 
    </Switch> 

たぶんconsole.log(this.props.match)コンポーネントであなたのルーティングで起こっていただきました！参照してください。..

希望これが助けたので、いくつかの詳細を提供してください私たちはより良いお手伝いをすることができます..