Apache Config for React Router

.htaccess

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

Exactly 5 years later, still works like a charm, thank you for this!

RewriteCond %{HTTPS} on
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Should be?
RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

I did found one solution

Just replace "api" with any subfolder you'll like to ignore

<IfModule mod_rewrite.c>
  RewriteRule ^(api)($|/) - [L]
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

For multiple directories use (directory_one|directory_two)

Hi, just to learn: can you explain why this is necessary?
I don't understand why you have to exclude the folders explicitly. If they are real folders, they should be excluded by this rule: RewriteCond %{REQUEST_FILENAME} !-d right?

To be honest, htaccess files are not my strong suit, it's more of a trial and error for me.
I'm sorry I can't be of help here, maybe someone else can explain better.

How and in more application like is server application, ever exists some configuration file, who getting some away of work. In our case is file .htaccess. There we must setting how we wish , other word how is need us. Example for developing and run server for web, we can use different ports for that. In our case for web address use port 80. But if we don't say to server config. file some other port. Our work can't see any body. reason is wrong port who show application. For that we must reprograming configuration file and get order to server who port he must use for showing our application. This is one of solution. Other solution is in our react node express application, there in package.json file we get some proxy and for environment port write number port who is need. For that case we must make file .env . There we write const port =80; And that our server part see this and our application setting on this port.
All in all, two things are needed to solve any problem:

• One is to find out how something works
• second to identify the cause of the problem based on the first point.
  The reason for this approach is for the reason that no matter what is invented, the working principle is almost identical. If we look at the code functions, they are written the same in almost all program speeches, sometimes they have smaller differences. But it’s not something big. While the main point is to talk about how something is very good, fast, efficient. But when you start working on it, you can see that it is just a complication without any need. We used to have PHP, HTML, MySQl, PYTHON. If we go back a long time, we will notice the Astec C programming language, from which PHP, java, java script, c ++ were created. pascal, and many others. Under the pretext of how they are better. but do you judge for yourself.

Works great!

Children routing not loading.
I have following configuration in .htaccess file

RewriteEngine On RewriteBase **%{ENV:REACT_APP_SUBPATH}/** RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . **/%{ENV:REACT_APP_SUBPATH}/**index.html [L]

In index.tsx file we mention that BrowserRouter basename=${ENV:REACT_APP_SUBPATH}

It is working for parent routes but children routes its not working means
http://sample.com/account -> this is working
http://sample.com/account/create -> this is not working it showing blank pages.

Sir you are a god among men. I've been trying to figure this out for hours.

I resolved it by implementing the following steps Step 1 Add the following in package.json "homepage": "." Step 2 Added the following in .htaccess <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> Step 3 Add the following in the public/index.html above meta:description <script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>

Thank you so much!

Will this work for dreamhost server as well?
I'm new and facing the same problem. Surfing on the internet for almost a week tried everything but nothing worked for me.

Will this work for dreamhost server as well? I'm new and facing the same problem. Surfing on the internet for almost a week tried everything but nothing worked for me.

Technically if your hosting is using Apache it will work, the only thing you will need is to create the file via FTP (Or your preferred way) in the folder of your website.

Here a link to dreamhost docs about creating the file.

When i host under direct domain its worked, But in sub folder blank page with favicon only displayed

for starting react app on different Port , you can use make file .env and in here you add next code PORT= 80 example if you start develop on port 80, or build app at this port.
This is possible because babel and other when build production code for final app looking this file and accepted . But , you must get attantion for admin premision on this port.
And setting virtual in access httpdocs .