I have a React application which is located in the mysite/admin directory. So index.html is located in mysite/admin/index.html. The application contains routes like /admin/users or /admin/tools/removeUser.

How do I configure .htaccess to load mysite/admin/index.html when I open mysite/admin/ for exapmle? The url itself should remain the same in order to render necessary route.

Should say that there is also a React app in the root directory. Here is what I tried:

RewriteEngine on
RewriteBase /

#for app in subdirectory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^admin admin/index.html [L]

#for root app
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

But when I open mysite/admin/tools/removeUser for example, in the console I get this error:

What am I doing wrong?

I have a React application which is located in the mysite./admin directory. So index.html is located in mysite./admin/index.html. The application contains routes like /admin/users or /admin/tools/removeUser.

How do I configure .htaccess to load mysite./admin/index.html when I open mysite./admin/ for exapmle? The url itself should remain the same in order to render necessary route.

Should say that there is also a React app in the root directory. Here is what I tried:

RewriteEngine on
RewriteBase /

#for app in subdirectory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^admin admin/index.html [L]

#for root app
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

But when I open mysite./admin/tools/removeUser for example, in the console I get this error:

What am I doing wrong?

• javascript
• reactjs
• apache
• .htaccess
• react-router

1 Answer 1

You're right.

Potential problem.

When run on local server Node JS routing (ponents are BrowserRouter, Switch, Route ) is work fine. Opening direct link and reload page correct work. But when deploy on web server Apache are situation, start ponent app work (because page don’t reload), but when reload page then appear 404 page. The same page 404 appear when opening direct link contens a part of route app. Server Appache requires correct settings in file .httpaccess For example I have two CMS on server apache and one of them is SPA. Мy CMS should have rules and another system like SPA should have rules in .httpaccess

Possible solutions:

    RewriteEngine on
    #for app in subdirectory
    RewriteBase /admin/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule ^.*admin/.* /admin/index.html [L]
    #for root app
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]

It is important that the rules for the application subdirectory do not overwrite the rules for the main application