ReactJS路由/瀏覽器同步重新加載/路徑會產生無法獲取/路徑錯誤

Question

我正在構建一個基本的React/Flux應用程序，並使用react-router-component進行路由，瀏覽器同步，並browserify依賴注入。

我遇到的問題是，當在不是「/」（即「/ profile」，「/ gallery」等）的路徑上進行實時重新加載或任何重新加載時，我會得到一個無法獲取/路徑（或任何路線）的錯誤消息。

我懷疑這與單個頁面應用程序和所有路由在客戶端上完成有關。

這是我的瀏覽器同步設置（這是非常基本的）。我認爲我可能需要添加一些中間件，但我不確定要在中間件中放置什麼。

gulp.task('browser-sync', function() { 
    browserSync({ 
     server: { 
      baseDir: './client' 
     }, 
     notify: false 
    }); 
}); 

Answer 1

這很可能是因爲無論您用於提供應用程序的Web服務器都試圖在服務器端實際找到/ profile還是/ gallery。您需要指示您的服務器，所有對任何請求的請求都轉到了根目錄。有時候取決於你的軟件，這叫做'html 5模式'。

我注意到，有關於這個瀏覽器同步的git回購與此可能的解決方案後：https://github.com/shakyShane/browser-sync/issues/204

但其基本思想是讓服務器發送的一切，是不是*的.js或者*。 css到./index.html（假設這是你的應用的入口點文件）。這樣服務器本身不會查找這些路由，它只是加載您的應用程序，然後可以在客戶端自由地解析它們。

希望這會有所幫助。

Answer 2

如果使用browserSync，那麼這將是這樣的：

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


server : { 
      baseDir:'./(anydirectory)', 
      middleware: [ historyApiFallback() ] 
     }