This allows proper refreshing of browser page while running in dev mode with webpack.

react-router

// The keyword Switch is extremely important.  Without it, the NotFoundPage
// becomes visible on all other pages.
class App extends Component {

  render () {
    return (
      <div id='app' className='phs-app'>
        <Header id="toolbar"/>
        <NavigationBar />
        <div id='content'>
          <Switch>
            <Route exact path="/HelpPortal"               render={() => (<Redirect to="/HelpPortal/services"/>)}/>
            <Route exact path="/HelpPortal/services"      component={Services} />
            <Route exact path="/HelpPortal/secrets"       component={SecretsView} />
            <Route       path="/HelpPortal/consul-nodes"  component={ConsulNodesView} />
            <Route component={NotFoundPage} />
          </Switch>
        </div>
        <Footer id="footer"/>
      </div>
    );
  }
}

webpack.babel.config.js

// Part of the webpack dev config.
const devServer = {
  compress: true,
  host: '0.0.0.0',
  port: 3001,
  
  // The following proxy section will foward any requests the webbrowser is 
  // making (while running on port 3001) to the backend server it is tied
  // to.
  proxy: {
    '/HelpPortal/socket.io': {
      target: 'ws://localhost:9000',
      ws: true
    },
    '/HelpPortal/api': { target: 'http://localhost:9000' }
  },
  
  // HistoryApiFallback will redirect any 404 to the specified index page.
  // This code is using : https://github.com/bripkens/connect-history-api-fallback
  historyApiFallback: {
    index: '/HelpPortal/index.html',
    verbose: console.log.bind(console)
  }
};