Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@alexsasharegan
Created September 7, 2016 00:36
Show Gist options
  • Save alexsasharegan/173878f9d67055bfef63449fa7136042 to your computer and use it in GitHub Desktop.
Save alexsasharegan/173878f9d67055bfef63449fa7136042 to your computer and use it in GitHub Desktop.
Apache Config for React Router
<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>
@tinoreyna1984
Copy link

Works great!

@aryanisml
Copy link

aryanisml commented May 13, 2022

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.

@eastonyarbrough
Copy link

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

@agiletub
Copy link

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!

@Maryam-Rasheed
Copy link

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.

@jorovipe97
Copy link

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.

@Ragandev
Copy link

Ragandev commented Feb 3, 2024

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

@Miodragt
Copy link

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 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment