.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

Answer 1

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>