React.jsでサイトを更新しても動作しません

Question

URLにパラメータがあるときにサイトを更新しようとすると、空白のページが表示されます。次のように

私routes.jsファイルは次のとおりです。

私は http://localhost:8001/registrationすべてによ

const routes = (
    <Route path="/" component={App}> 
    <IndexRoute component={HomePage}/> 
    <Route path="registration/:id" component={hideIfLoggedIn(Registration)}/> 
    <Route path="registration" component={hideIfLoggedIn(Registration)}/> 
    <Route path="reset-password" component={PasswordReset} /> 
    <Route path="portal" component={requireAuth(UserPage)} /> 
    </Route> 
); 

は完璧に動作します。ページを更新すると問題なく動作します。

しかし、問題は私がhttp://localhost:8001/registration/step-oneにいるときです。初めて読み込むときにうまくいきますが、サイトを更新しようとすると空白のページが表示されます。あなたは、他のルートのindex HTMLを提供するようにサーバーを構成する必要が

EDIT

gulp.task('connect', ['watch'], function() { 
    connect.server({ 
     root: ['dist'], 
     port: config.port, 
     base: config.devBaseUrl, 
     livereload: true, 
     fallback: 'dist/index.html' 
    }) 
}); 

Answer 1

。 ブラウザ要求/registration/step-one、このパスにはindex.htmlが見つかりません。したがって、失敗します。

connect-history-api-fallbackを使用してください。

ミドルウェアはNPMから入手でき、簡単に追加できます。

npm install --save connect-history-api-fallback。 インポートライブラリ

var history = require('connect-history-api-fallback');

今、あなたはだけなので

あなたもミドルウェアのこの作品を使用することができます。もちろん、

var connect = require('connect');

var app = connect() .use(history()) .listen(3000);

のようなアプリケーションにミドルウェアを追加する必要があります特急：

var express = require('express');

var app = express();

app.use(history());