DEV Community

John
John

Posted on

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.

help

Any suggestions?

Thanks

Top comments (10)

Collapse
 
karnak19 profile image
Basile

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

/* /index.html 200
Collapse
 
brianemilius profile image
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

Collapse
 
johnziss9 profile image
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.

Collapse
 
dance2die profile image
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.

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

Collapse
 
dorshinar profile image
Dor Shinar • Edited

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

Collapse
 
mackr2015 profile image
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.

Collapse
 
avirgvd profile image
Govind Avireddi • Edited

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;
    }
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
navizdev profile image
Juan Silupu Maza • Edited

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

Collapse
 
baalbvip profile image
Baalberith

brrrrrrrrrrrrro the best response

Collapse
 
davulurihemanthchowdary profile image
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