React Route Expects Server 'HTML5 Mode'

User's of any web-based application expect retention of their browser history. They expect the Back/Forward buttons to work in an expected way1. Modern Single Page Applications (SPA) have struggled mightily to attain this very expected behavior2.

The ReactJS and Angular JavaScript web app eco-systems provide the user with expected history behavior. They do that by leveraging the HTML5 push/pop history API to take complete control over a web app's history. React Router handles this for all but the most complex history interests. An ReactJS web app programmer will handle the odd complex case by directly interacting with the pushing/popping history.

This solution depends on:

  • Deploying a web app's supporting static HTML, JavaScript, CSS, images files, etc. to root '/'3
  • Referencing the static files that make up the client code within index.html using <script/> tags.
  • Configuring web server to handle 'HTML5 mode'

E.g.: index.html referencing static content from root.

<body>
  <div id="root" style="height: 100%"></div>
  <script src="/vendor.js"></script>
  <script src="/app.js"></script>
</body>

Note the rooted path to the src files:

Configuring a web server to handle 'HTML5 mode' means: rewrite URLs containing fragments controlled by the client to forward to the app's index.html. root receives all requests. That way a ReactJS, Angular, … client app can pick up the route and display the correct view.

I find 'HTML5 mode' hard to explain. The video below explains how 'HTML5 mode' works better than I ever could:

Demystifying AngularJS Routing - HTML5 and HashBang modes

This React/Redux/Route web app4 works using the following web server configurations:

1 - What a user expects may not be the identical URL of the previous visited page.

2 - Please Respect the Back Button!

3 - react-router History Reference: Configuring Your Server

4 - This test application is based on the popular react-redux-starter-kit. It has added:

* DevOps support to deploy a test web server to a CentOS VM using vmware, Vagrant, and Ansible. See .../provider & .../provision within the project for that support.
* two additional, increasingly complex routes containing form handling.
* lots of UT'ing examples.