React Router Gotcha

Matt Schoeneck

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

Last updated by on .

What Are Your Thoughts?

Your email address will not be published. Required fields are marked *