React Router not Working in Production

Hi all,

I have had this issue for a couple of weeks now and I have run out of ideas on what to try.

I have built a website using create-react-app for a friend. I have used react router for the links through out the website.

When I put the website live on a server, I'm not able to type the URL in the browser. If I do so, I get a Not Found error. It also happens if I'm on page on the website and I refresh it.

I have been told I need to add backend with nodejs and more specifically Express backend to the project so I can direct the pages to the index.html which I did but I still can't get it to work.

Any suggestions?

Thanks

Comments

[Basile]

Is it deployed on Netlify ? If yes, you need to add a _redirects file in your public folder like so :

/* /index.html 200

[Brian Emilius]

This is an issue no matter what platform you deploy to.
Netlify made it easy, but depending on what platform you use, you need to checkout their documentation on how to redirect all requests to /index.html

[John]

Not on Netlify unfortunately. I just run npm run build, got the files and uploaded them on a web host server my friend has purchased.

[Sung M. Kim]

This is not the problem with RR per se, more of a server-side issue for SPAs.

e.g.) The same error occurs on IIS as well.

How to deploy React Application on IIS Server

sumitkharche ・ Dec 8 ・ 3 min read

#react #build #webdev #deployment

You might wan to consult with the host server, to find out the site server, and how to configure it work. (apache, nginx, they all have a way to redirect).

[Dor Shinar]

Hi, I think that you should consult with the official create-react-app docs - create-react-app.dev/docs/deployment

[mackelele]

I have the same exact problem.

Only showing up in the production as local dev as this is done behind the scene.
Following some suggestions on the web I did a temporary fix by re-directing Apache ErrorDocument to point to index.html.

This is a temporary fix and it still gets 404 in the console. I am yet to find a solution.

Inside of your server apache/nginx configuration /etc/apache2/sites-available/ ( find correct conf for nginx edit the virtualhost with the following.

ErrorDocument 404 /index.html

Hope this help someone.

[Govind Avireddi]

I solved this problem for NGINX server, with simple solution by editing NGINX configuration for location like this:

    location / {
            try_files $uri $uri/ /index.html =404;
    }

Adding "/index.html" to this line fixed the routing issue without .htaccess file or any other code changes.

[Juan Silupu Maza]

Add "homepage": "http://mywebsite.com or IP/" in package.json
Mor info Here

[Baalberith]

brrrrrrrrrrrrro the best response

[Davuluri Hemanth Chowdary]

In name cheap i dont have access to /etc/apache2 folder . so is there any other solution? i even added the .htaccess file still I cannot access other routes of the website