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.
This solution depends on:
- Referencing the static files that make up the client code within
- Configuring web server to handle 'HTML5 mode'
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
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:
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.
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.