react-router throwing 404 upon page refresh with React app hosted on GoDaddy

Question

I deployed a React website using GoDaddy (http://normaned.com), and I’m having trouble with my react-router routing not working upon refresh. Clicking on links works as expected, but if a page is refreshed a 404 page is displayed. I’m using BrowserRouter from react-router.

The GoDaddy hosting plan is "Economy Windows Hosting with Plesk". Unfortunately, I’m not the one who set up the hosting service, and I’m unsure if I can change from Plesk to cPanel without extra monetary cost... or if that would even be a way to get closer to solving my problem (i.e., Windows vs Linux hosting).

EDIT 10/19: I now realize that the server is a Windows IIS server, and I need a web.config file (not a .htaccess file). Though, I'm still unsure of what code needs to go in the web.config file.

Here is my GitHub repo for the website: https://github.com/jenna-m/norman-ed

---

I have tried suggested methods I’ve found on StackOverflow, the GoDaddy help forum, and elsewhere, but it’s still not working. Here are some things that I’ve tried:

https://mcmap.net/q/45436/-react-router-urls-don-39-t-work-when-refreshing-or-writing-manually

https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

I’ve tried adding the following to an .htaccess file in the public_html root 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>

I created the .htaccess file directly in Plesk, making sure that no extra characters were added (as suggested in this article (https://www.godaddy.com/help/what-is-htaccess-2504)

After trying to solve the problem for a bit, I realized that this might have to do with the fact that I’m using Plesk vs cPanel. So, I found these potential work arounds:

https://support.plesk.com/hc/en-us/articles/115001697373-Website-with-configured-htaccess-is-not-working-404-Not-Found

https://support.plesk.com/hc/en-us/articles/115003015833-Redirection-rules-in-htaccess-file-do-not-work-in-Plesk

I thought that either of these solutions would work, but they didn't.

I found this post from Plesk support (https://support.plesk.com/hc/en-us/articles/115000063989-Does-Plesk-support-Apache-web-server-for-Windows-), which lead me to this Microsoft article (https://blogs.msdn.microsoft.com/azureossds/2015/04/23/converting-apache-htaccess-rules-to-iis-web-config-using-iis-manager-for-azure-websites/).

Cyan

Answer 1

It turns out that I was using a Windows IIS server. I'm new to the world of web servers and didn't know that I was working with an IIS server.

It turns out that I needed a web.config file to make my URL redirects work, and not a .htaccess file, like I was trying to use initially.

This is the content (found from this StackOverflow answer) of my web.config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Cyan

i have been trying to figure out this from last 4 days. you saved me, Thanks :) – Ariew

Answer 2

If you are using and Apache server the problem might be your .htaccess file, when you are using React router the routes that are created or declared in React do not exist in the server, therefore we have to configure the requests so that each one goes to index.html and show a 404 in React when the page is not found.

According to the create-react-app documentation:

If you are using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:

   Options -MultiViews
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [QSA,L]

Link to create-react-app documentation:

https://create-react-app.dev/docs/deployment

You can read more about the creation of a 404 page in React in the React router: documentation:

https://reacttraining.com/react-router/web/example/no-match

Dupe

thanks for the reply. I replaced my code in .htaccess with the code you provided, and it didn’t seem to work (as-is, unindented, and even when wrapped in <IfModule>). I guess I’m not entirely sure if the website is using an Apache server. All I know is that the hosting plan is using Windows Plesk, and nothing on my Plesk dashboard says anything about Apache. I’ve updated my original question with some more info. – Cyan

To be able to help you I would need to know if its an apache , windows server or anoher one, and how are you serving the files in other words which backend technology are you using, because for example if you are using nodejs to serve the app you need to make the configuration to make the react app work in node to make it work – Dupe

After poking around a bit, I now understand that the server is Windows IIS, and I now realize that I need a web.config file instead of a .htaccess file. I’m now looking into resources like this (forums.iis.net/t/1162450.aspx) to fix the issue. I have no backend; I just used create-react-app, and did not implement any backend myself, since this is a single page application. – Cyan

alright! I got it to work with a web.config file, and this code (https://mcmap.net/q/45436/-react-router-urls-don-39-t-work-when-refreshing-or-writing-manually). – Cyan

Answer 3

Follow these steps and you will be fine

1. Specify your homepage in your package.json file like this

    {
     "name": "yourappname",
     "homepage": "http://example.com",//add your domain here line
     "private": true,
     "version": "0.0.0",
    }
   

2.Build your app by running yarn build or npm run build

3.Then copy the contents of your build folder and paste them on public_html folder in your cpanel

3.Go to your Cpanel file manager public_html folder and edit .htaccess file or create new one if it does not exist. and paste this there

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

Note the .htaccess for this should be at the same level with the contents of the build folder.

4. Save and your are done

Pashto

Answer 4

Try specifying your homepage in your package.json file

{
"homepage": "https://yoursite.com",
}

Then run

npm build

or

yarn build

Olva

Answer 5

Inside You Public Folder

Create _redirects File

/*    /index.html 200

Create .htaccess File

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

Multi