無法通過react-router v4獲取「/ About」（生產幫助）

Question

我一直在閱讀所有有關react-router-dom（v4）的文檔，以及Stack Overflow問題與我相同的錯誤，但A ）他們留下了很多沒有答案的漏洞和B）他們似乎都只是建議一個開發只修復，所以我希望看到人們實際上在爲這個簡單的場景進行的製作和C）我可能做一些愚蠢的事情並且答案不適合我，在控制檯中出現錯誤「Can not GET/about」呈現沒有錯誤。

我正在使用Express，React，Node和使用Webpack進行編譯。我可以成功地訪問我的主頁，然後點擊任何鏈接將我帶到相應的組件，但手動輸入URL會破壞此操作，如here所述，並且討論此錯誤的原因here。

大多數答案建議在webpack.config.js文件，這意味着我還需要運行npm install --save-dev webpack-dev-server和使用node_modules/.bin/webpack-dev-server作爲文檔建議運行它添加devServer.historyApiFallback = true和output.publicPath = '/'。做這一切，沒有任何反應。事實上，現在情況更糟，因爲我也無法訪問我的「/」主路線。

因此，在放棄我目前的配置之前，1）我能做些什麼來解決這個問題？ 2）它甚至重要嗎？ webpack-dev-server顯然僅用於開發，那麼生產呢？

我webpack.config.js文件：

var webpack = require('webpack'); 
var path = require('path'); 
var envFile = require('node-env-file'); 

process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 

try { 
    envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env')) 
} catch (e) { 
} 

module.exports = { 
    devServer: { 
    historyApiFallback: true, 
    }, 
    entry: [ 
     'script-loader!foundation-sites/dist/js/foundation.min.js', 
     './app/app.jsx' 
    ], 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       //you don't get to see this 
      } 
     }) 
    ], 
    output: { 
     path: __dirname, 
     filename: './public/bundle.js', 
     publicPath: '/' 
    }, 
    resolve: { 
     modules: [ 
      __dirname, 
      'node_modules', 
      './app/components', 
      './app/api' 
     ], 
     alias: { 
      app: 'app', 
      applicationStyles: 'app/styles/app.scss', 
      actions: 'app/actions/actions.jsx', 
      configureStore: 'app/store/configureStore.jsx', 
      reducers: 'app/reducers/reducers.jsx' 
      ), 
     }, 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     rules: [ 
      { 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'] 
       }, 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/ 
      }, 
      { 
       loader: 'url-loader?limit=100000', 
       test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/ 
      }, 
      { 
       loader: 'sass-loader', 
       test: /\.scss$/, 
       options: { 
        includePaths: [ 
         path.resolve(__dirname, './node_modules/foundation-sites/scss') 
        ] 
       } 
      } 
     ] 
    }, 
    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map' 
}; 

我app.jsx：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
import {Provider} from 'react-redux'; 
import {BrowserRouter as Router, Route, Switch, Link, HashRouter} from 'react-router-dom'; 

import Home from 'Home'; 
import Watch from 'Watch'; 
import About from 'About'; 
import AddShow from 'AddShow'; 

var store = require('configureStore').configure(); 
import firebase from 'app/firebase/'; 

// Load Foundation 
$(document).foundation(); 

// App css 
require('style-loader!css-loader!sass-loader!applicationStyles'); 

ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <div> 
     <Route exact path="/" component={Home}/> 
     <Route path="/watch" component={Watch}/> 
     <Route path="/about" component={About}/> 
     <Route path="/addshow" component={AddShow}/> 
     </div> 
    </Router> 
    </Provider>, 
    document.getElementById('app') 
); 

Answer 1

你必須設置Web服務器（即與反應應用服務index.html一）將所有請求重定向到您的index.html的網址，以便反應路由器可以完成其工作。這就是建議改變webpack.config.js是做的WebPack-DEV-服務器

在你webpack.config.js您需要啓用HTML插件這樣的WebPack知道了您的index.html是：

plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
      //you don't get to see this 
     } 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'public/index.html' //or wherever your index.html is 
    }) 
],