React Router Gotcha

When building our latest product launch website, Gyfter.io, we ran into an annoying bug upon alpha deployment... routing.

In development, any erroneous url entry (or page visit after logout) redirected nicely to the login screen. On live, everything 404'd.

What was so different about the routing in production that we'd missed in dev? The guilty party was a convenient, default setting for WebPack Dev Server:

historyApiFallback: {
index: 'index.html'
}

Our dev server was playing nice and redirecting us to the start of the app.

Here's how to do the same thing in apache:


<Directory /var/www/vhosts/web03l.fjorgedigital.com/web-client.gyfter.io/www>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
RewriteRule ^ index.html [L]
</Directory>


Source

This works for angular as well (or any other webapp that has state).