title: Cannot GET "/About" with react-router v4 (Production Help)
body: <p>I've been reading over all the docs for react-router-dom (v4), and tons of Stack Overflow questions with my same error, but A) They leave a lot of unanswered holes and B) They seem to all be suggesting a development only fix, so I'm hoping to see what people are actually doing in PRODUCTION for this simple scenario and C) I'm probably doing something stupid and the answers aren't working for me, with the error "Cannot GET /about" rendering with no errors in the console. </p>
  
  <p>I'm using Express, React, Node and using Webpack for compiling. I can successfully reach my homepage, and clicking any links takes me to the appropriate components, but manually typing in the URL breaks this, as discussed <a href="https://stackoverflow.com/questions/43209666/react-router-v4-cannot-get-url" title="React-Router v4-Cannot GET *URL*">here</a> and the reasons for this error discussed <a href="https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually" title="Discussion of Server-Side/Client-Side Routing">here</a>.</p>
  
  <p>Most answers suggest adding <code>devServer.historyApiFallback = true</code> and <code>output.publicPath = '/'</code> in the webpack.config.js file, which implies I also need to run <code>npm install --save-dev webpack-dev-server</code> and run it using <code>node_modules/.bin/webpack-dev-server</code> as suggested in the docs. Doing all of this, nothing happens. In fact, it's worse now because I also can't access my home route of '/'. </p>
  
  <p>So before dropping my current config here, 1) What can I do to fix this? 2) Does it even matter? The webpack-dev-server is obviously for development only so what about production?</p>
  
  <p>My webpack.config.js file:</p>
  
  <pre><code>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'
  };
  </code></pre>
  
  <p>My app.jsx:</p>
  
  <pre><code>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(
    &lt;Provider store={store}&gt;
      &lt;Router&gt;
        &lt;div&gt;
          &lt;Route exact path="/" component={Home}/&gt;
          &lt;Route path="/watch" component={Watch}/&gt;
          &lt;Route path="/about" component={About}/&gt;
          &lt;Route path="/addshow" component={AddShow}/&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
  );
  </code></pre>