React router dom not working after deployment

Question

I'm using the react router dom for my frontend routing, but whenever I refresh the page or access any URL which isn't the root or '/' the server responds with a 404, before I ran npm build the router worked just fine even if I refreshed the page.

score 0 · Answer 1 · answered Jun 24 '21 at 19:19

You should add .htaccess (server configuration) file to your remote Apache server's directory with the following code (forces https):

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} off [OR]
  RewriteCond %{HTTP_HOST} ^www\. [NC]
  RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
  RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]
  RewriteCond %{REQUEST_FILENAME} -s [OR]
  RewriteCond %{REQUEST_FILENAME} -l [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

Without forcing https:

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

score 0 · Accepted Answer · answered Jun 24 '21 at 19:43

0

Please check React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click

https://coderrocketfuel.com/article/fix-404-error-when-using-react-rouder-dom-and-nginx

answered Jun 24 '21 at 19:43

Abhijit Sil

191
4

Thanks the last article was really helpful, I had tried but wasn't restarting nginx, I've restarted it and everything works just fine! – Raúl M Jun 25 '21 at 02:42

React router dom not working after deployment

2 Answers2