webstormbrowserifybabeljsreact-router-v4babelify

Browserify + WebStorm debug breaks routing in React-Router v4 BrowserRouter


I am writing a single page app with React for educational purposes. My React-Router v4 BrowserRouter handles client side routing correctly on CodeSandbox but not locally. In this case, the local server is the webstorm built-in devserver. HashRouter works locally but BrowserRouter does not.

Functioning properly: https://codesandbox.io/s/j71nwp9469


Solution

  • The solution was to understand how push state routing and the history API works. It is necessary to proxy requests through the index page when serving Single Page Applications that utilize the HTML5 History API.

    The Webstorm dev server is not expected to include this feature, therefore the mention of Webstorm in this thread was a mistake.

    There are multiple libraries of < 20 lines which do this for us, or it can easily be hand coded.