重新加載/刷新時，封裝URL以修復React js應用程序頁面上的404錯誤

Question

我已經使用react js創建了一個站點。 在使用browserHistory本地系統上運行正常，但在生產服務器上則無法運行。 第一次正確加載。 當我刷新頁面時，它給我“找不到頁面”錯誤。

我嘗試使用hashHistory 。 它解決了我的問題，但我正在尋找更好的解決方案，因為我不希望包含＃和隨機密鑰的復雜URL hashHistory 。 （我們希望它封裝為類似http://example.com/about而不是類似http://example.com/#/about?_k=9yfmfq ）

我的webpack.config.js代碼-

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000
  }
};

在apache2中尋找解決方案。 很抱歉問一個菜鳥問題。

Answer 1

問題是，當您第一次加載一個yourdomain.com ，服務器yourdomain.com index.html文件作為默認文件。 因此，當您嘗試使用yourdomain.com/something ，服務器將嘗試找到該文件，但由於找不到該文件，它將發送404。您必須將服務器配置為將所有頁面請求重定向到index.html文件。

這是single page application的簡單nginx配置-

location / {
    try_files $uri /index.html;
}

這會將所有url重定向到index.html，這將加載您的javascript，然后所有路由都將由javascript處理。