React Router Gotcha

Matt Schoeneck
July 5, 2017

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).

Stay in Touch!

Stay in Touch!
Solutions Architecture

browse through our blog articles

Blog Archive