.htaccess Rewrite for React using React Router

Question

I need to rewrite or add to my existing .htaccess file so that my hosting service (Hostinger) can use a single index.html file for all pages instead of trying to fetch a new file server-side. I am using React with React-Router and it does not understand how to use the paths correctly.

Existing File:

This was used to fix an issue with my SSL

========================== File ===========================

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.matthewendicott.space/$1 [L,R=301] 

RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.matthewendicott.space/$1 [L,R=301]

====================== Testing and Similar Issues ==============

Here are a few things that I have tried:

https://hostpapasupport.com/set-301-permanent-redirect-using-htaccess/

https://mediatemple.net/community/products/grid/204643080/how-do-i-redirect-my-site-using-a-htaccess-file

And here is a similar issue:

How to fix "404" error when directly accessing a component in react

PCDSandwichMan · Accepted Answer · 2020-01-07 14:56:46Z

41

If anyone needs help with this I was able to work with a friend of mine at Hostinger and here is what your .htaccess file will need to include.

Copy and paste exactly:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

answered Jan 7, 2020 at 14:56

PCDSandwichMan

2,1581 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arashdeep Singh Over a year ago

I tried the exact same code and it work fine on the first look. but if we reload the page or visit a page directly from the URL. it gives out ERROR 404.

PCDSandwichMan Over a year ago

That's weird, I cannot replicate that issue

Mher · Accepted Answer · 2022-01-21 06:19:25Z

1

In my case .htaccess didn't work. I had to change Apache virtual host file and now it works fine.

    <Directory /var/private/test-site/dream-list/build/>
            Options FollowSymLinks MultiViews
            AllowOverride None
            Order allow,deny
            allow from all

        # ADDING FOLLOWING LINES SOLVED THE PROBLEM
        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 to allow html5 state links
        RewriteRule ^ index.html [L]

    </Directory>

answered Jan 21, 2022 at 6:19

Mher

1,34313 silver badges31 bronze badges

Collectives™ on Stack Overflow

.htaccess Rewrite for React using React Router

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related