title: historyApiFallback, React Router v4, Webpack-Dev-Server, "Cannot get /map"
body: <p>I know I'm not the only one facing this issue but after searching the web for a while and trying out everything it gave me, I gotta ask for my case here.</p>
  
  <p>I'm getting the popular error that I receive a 404 whenever I try to access a route of my app, when not using an app-related way. So for example if I refresh my page when I'm at "/map", it says "Cannot get /map".</p>
  
  <p>This is my current configuration, although I tried several ones with different devServer: {} settings and playing with publicPath etc.:</p>
  
  <p>webpack.config.js:</p>
  
  <pre><code>const path = require("path");
  
  module.exports = {
      entry: "./src/index.js",
      output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, "dist"),
          publicPath: "dist"
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: "babel-loader"
              }
          ]
      },
      devServer: {
          historyApiFallback: {
              index: "dist/index.html"
          }
      }
  };
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  
  import { BrowserRouter, Route } from "react-router-dom";
  
  import Homescreen from "./Homescreen";
  import Map from "./Map";
  
  import { withStyles } from "material-ui/styles";
  import Reboot from "material-ui/Reboot";
  import AppBar from "material-ui/AppBar";
  import Toolbar from "material-ui/Toolbar";
  import Typography from "material-ui/Typography";
  import Button from "material-ui/Button";
  import IconButton from "material-ui/IconButton";
  import MenuIcon from "material-ui-icons/Menu";
  
  const styles = {
      flex: {
          flex: 1
      },
      menuButton: {
          marginLeft: -3,
          marginRight: 20
      }
  };
  
  class App extends Component {
  
      render() {
  
          const { classes } = this.props;
  
          return (
              &lt;BrowserRouter&gt;
                  &lt;div&gt;
                      &lt;Reboot /&gt;
                      &lt;AppBar position="sticky"&gt;
                          &lt;Toolbar&gt;
                              &lt;IconButton className={classes.menuButton} color="inherit" aria-label="Menu"&gt;
                                  &lt;MenuIcon /&gt;
                              &lt;/IconButton&gt;
                              &lt;Typography variant="title" color="inherit" className={classes.flex}&gt;
                                  WeltRaum 31
                              &lt;/Typography&gt;
                              &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
                          &lt;/Toolbar&gt;
                      &lt;/AppBar&gt;
                      &lt;Route exact path="/" component={Homescreen} /&gt;
                      &lt;Route path="/map" component={Map} /&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
  
      }
  
  };
  
  export default withStyles(styles)(App);
  </code></pre>