Error message when navigating through react website after uploading it on bluehost

Question

Full error message: Not Found The requested URL was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

My problem is when I uploaded my build file to cpanel(via bluehost) I started getting this error when I try to navigate to different pages within my react. The homepage works and displays all that it's supposed to. My local host doesn't have this problem because according the react documents the development server knows how to handle the requests. I have researched everywhere on the internet for the answer to this problem, but nothing seems to work.

This is the configuration in my .htaccess file in my public directory:

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

This is my package. json file:

My build file was uploaded as a zip file into cpanel > public_html. All files were extracted from the build folder and moved into public_html. Like previously stated my homepage works but when I navigate to other pages it does not.

Answer 1

1. npm run build without a .htaccess file

2. In cpanel in the top right corner there is a settings option. Choose settings and check the option "show hidden files." (also make sure you're in the document root)

3. In the top left corner there is the option to add a file. Click that and create a new .htaccess file.

4. Paste this in the new file, save it and you should be able to move through your website without the error message. Hopefully I just saved you the 5 days it took me to figure this out.

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