I created a page with reactJS and I am trying to upload it to Hostgator. I used react-router-dom and I can access the main website page, but when I try to access an inside page like /about
I receive a 404 error.
The pattern that you are looking for is called a front controller. You want to route every URL through central processing logic so that it can choose which content to display at that URL. In the case of React, that logic is implemented in the Router component.
Shared hosting such as Hostgator typically uses the Apache server. By default, Apache maps URLs to the local file system. If a file exists at that path, it serves it, otherwise it shows a 404 error. You need to override this behavior to get your React router to be able to do its job. With Apache, configuration overrides can be implemented in a file named .htaccess
.
Deployment | Create React App has code that you need to put in a .htaccess
file on your web host in the same directory as your index.html
:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
This causes every single URL to be handled by index.html
unless a different file by that name actually exists in the file system. index.html
includes your React routing rules.