Search code examples
reactjsapachereact-router

Dealing with React Router on Apache server

I am experiencing problems with redirecting 404 errors for URL paths generated by React on an Apache server.

Scenario:

Let's say I have some URL generated by React Router: www.somewebsite.com/apps

Problem:

How do I redirect back to www.somewebsite.com/apps if the end-user clicks on refresh?

What I have tried:

So far, I am able to redirect the user to www.somewebsite.com. I just need to get the path before the redirect.

Solution

  • Set an Apache rewrite rule to rewrite all requests to your React app (index.html).

    Put this in your vhost config or a .htaccess file.

    <IfModule mod_rewrite.c>
    Options -MultiViews

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
</IfModule>

    Now, when a user presses refresh (or visits directly) on any route like /apps, your React app will be loaded and the router will display the relevant route.

    Note: the RewriteCond excludes static files from being rewritten which is necessary.