title: React Router v4 returning 404 on refresh
body: <p>I've got a couple of routes defined, and both work, but only when you follow the flow of the app. Let me explain:</p>
  
  <p>We go to the /first page, and the page renders: a bunch of links to the /second/:id page. You click one of the links and the /second/myID page appears. </p>
  
  <p>OK, so far it's all good.</p>
  
  <p>But then I make a change to the code and in the console I get this error:
  <code>GET http://localhost:8081/second/dist/bundle.js</code></p>
  
  <p>And the network tab shows bundle.js as a 404. If I refresh the page, I get the same weird /second/dist/bundle.js 404.</p>
  
  <p>If I hit the back button, the URL changes to <a href="http://localhost:8081/first" rel="nofollow noreferrer">http://localhost:8081/first</a>, but the page won't appear. If I refresh here, the page shows up properly.</p>
  
  <p>Here's my index.js:</p>
  
  <pre><code>class App extends React.Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;div&gt;
                      &lt;Route exact path="/" component={Main} /&gt;
                      &lt;Route path="/first" 
                          render={ () =&gt; &lt;First 
                                  idCards={idCards}
                              /&gt; 
                          } 
                      /&gt;
                      &lt;Route path="/second/:id"
                          render={ ({match}) =&gt; {
                                  return (&lt;Second 
                                      id={match.params.id}
                                  /&gt;);
                              }
                          } 
                      /&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here's my First component:</p>
  
  <pre><code>export default class First extends React.Component {
  
      render() {
          return (
              &lt;div className="first"&gt;
                  {this.props.idCards.map((card, index) =&gt; (
                      &lt;Second key={index} {...card} /&gt;
                  ))}
              &lt;/div&gt;
          );
      }
  };
  </code></pre>
  
  <p>Here's the Second component:</p>
  
  <pre><code>export default class Second extends React.Component {
      render() {
          return (
              &lt;h1&gt;{`ID: '${this.props.id}'`}&lt;/h1&gt;
          );
      }
  }
  </code></pre>
  
  <p>And my webpack.config.js:</p>
  
  <pre><code>var path = require('path');
  
  const DEV = process.env.NODE_ENV === 'dev';
  const PROD = process.env.NODE_ENV === 'prod';
  
  module.exports = {
      devtool: 'source-map',
      entry: './src/index.js',
      module: {
          loaders: [{
              test: /\.js$/,
              loaders: ['babel-loader'],
              exclude: /node_modules/
          },{
              test: /\.(png|jpg|gif)$/,
              loaders: ['url-loader'],
              exclude: /node_modules/
          },{
              test: /\.(css|sass|scss)$/,
              use: ['style-loader', 'css-loader?importLoaders=2', 'sass-loader'],
              // exclude: /node_modules/
          },{
              test: /\.(svg)$/,
              use: ['file-loader'],
              // exclude: /node_modules/
          },
          {
              test: /\.(otf)(\?.*)?$/,
              loader: 'url-loader?limit=10000&amp;mimetype=application/font-sfnt'
          }]
      },
      output: {
          path: path.join(__dirname, 'dist'),
          publicPath: '/dist/',
          filename: 'bundle.js'
      }
  }
  </code></pre>
  
  <p>And my question: Why am I getting this weird request for /second/dist/bundle.js?</p>