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://stackoverflow.com/a/40591955/11995771
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:
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/).
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>