无法通过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 
    }) 
],