Cannot display my own 404 page (React)

Username (e.g. epiz_XXX) or Website URL

username: bentong95923
url: countrydatabase.ml

(please specify the website or account you are asking about)

Error Message

Hi there!

I recently have trouble to load my website with something like “my.domain.com/some/path/here” which redirects to the default infinity 404 page instead of my own 404 page. Even if the page is not found then it should redirect to my website’s 404 page yet it does not work.

I have no idea why how to solve it. Please help.

My website uses React framework and is loaded from static htmls and js after the building process from npm.

Really appreciate your help and I will try to provide further information if you require.

(please share the FULL error message you see)

Other Information

(other information and details relevant to your question)

Hi Bayo,

Thanks for your reply. You may misunderstand my question. My website is loading fine with my domain name like “my.domain.com”. Yet when trying to load urls like “my.domain.com/some/path/here” then it redirects straight to the infinitely 404 page.

I seem to misunderstand, what’s the content of your htaccess file?
And your 404 works fine to me:

3 Likes

That’s weird. As it didn’t work on my pc. Have you tried it on incognito mode?
Thank you so much for helping!

try to clear your cache.

4 Likes

I have tried to clear cache but it doesn’t work. It looks like it is the problem of the “www” prefix as I wrote the htaccess file to redirect permenantly to the domain without the “www”. After removed the htaccess file on the server the 404 page works with the “www” prefix on chrome and edge, but neither on firefox.

Tested on mobile as well, exactly the same result as that on desktop.

My htaccess file is as follow:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.countrydatabase.ml [NC]
RewriteRule ^(.*)$ https://countrydatabase.ml/$1 [L,R=301]

Which way round is it? Does it work with www. or without? (I didn’t quite understand your last post)

I’m guessing you want it without www. so maybe try this code instead?

RewriteEngine On
RewriteCond %{HTTP_HOST} www.yourwebsitehere.com
RewriteRule (.*) https://yourwebsitehere.com/$1 [R=301,L]
3 Likes

Hi TigerMANEK426,

Thanks for your reply.

Sorry for the confusion. It does work with the www. prefix but does not work without it. I had tried your version (but I believe its the same version of mine) with my domain name yet it still does not work. As with this htaccess it redirects all traffic with the www. prefix to the one without it and it goes straight to the infinity 404 page (https://infinityfree.net/errors/404/)

1 Like

Ahh that makes more sense, your code is redirecting to non www!

Try this:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [L,R=301]

Thanks TigerMANEK426 it works well.

Just wondering why this could happen? I thought it should work for both with or without “www” prefix. Plus I actually want to get rid of the “www” prefix in my websites url…

If you want to setup a custom 404 error page, you have basically two options:

  • You add an ErrorDocument line to your .htaccess file to route not found URLs to your own error page.
  • You add .htaccess rules to redirect every not found URL to a single entrypoint, from where you handle routing through your application.

The first one is simpler, but given that your React app also does pretty URLs (like https://www.countrydatabase.ml/country/USA ), you may want to go with option 2 to make URLs like the one I posted shareable.

3 Likes

Going of what the admin said, your first option would be adding a bit of code to your .htaccess file, for example:

ErrorDocument 404 /path/to/404/page
1 Like

Thank you so much Admin for your response.

I am currently using TigerMANEK426’s htaccess to redirect from non-www to www traffic. Yet I would like to do the opposite way (ie to get rid of the www on url).

I am actually very curious about when I use the following htaccess (redirect www to non-www):

RewriteEngine On
RewriteCond %{HTTP_HOST} www.countrydatabase.ml
RewriteRule (.*) https://countrydatabase.ml/$1 [R=301,L]

when I have a path after the domain name like https://countrydatabase.ml/country/USA it just jumps straight to https://infinityfree.net/errors/404/ yet https://countrydatabase.ml can load my website correctly. May you know the reason why?

Many thanks and much appreciated!
bentong95923

Just out of curiosity, could I see your htaccess file?
(Maybe in DMs)

I am just currently using your version of htacces, which is the following:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^countrydatabase\.ml [NC]
RewriteRule ^(.*)$ http://www.countrydatabase\.ml/$1 [L,R=301,NC]

But I think you would like to see the one that I previously used as I created this question, which is the exact same htaccess attached in my response to the Admin above.

Ok, can you add this to the top of the htaccess file:

Options +MultiViews

This allows the site to run without having file extensions in the url.

Also, as a test add a different 404 page, you can use mine as test:

ErrorDocument 404 https://tbmproduction.com/err/404

Then, comment the code that redirects from non www and test the site.

Ok, so now your site is not being fussy about www. so I think that solves your problem?

I have figured it out by myself after googling for few hours and come out with the following htaccess:

RewriteEngine On 

# Redirect www to non-www
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301,NE]

# Redirects each requests to index.html and from there react router handles everything
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]

The reason why I still got the infinity 404 page is because the server does not know where, e.g. https://www.countrydatabase.ml/country/USA is as it recognizes the path as directory after the domain name. It is required to redirect all URLs including paths to a single entry point (not just the 404 page, but all pages) which is the index.html in this case (like what Admin mentioned) to allow React to handle the routing itself. Thanks Admin for your advice!

Really appreciate your help guys!!

Have a great day.

1 Like

Glad you got it to work :smile:

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.