score:0

i had this issue former days ago, but with apache web server, so in my case the issue was the flag allowoverwrite inside httpd.conf file that need to be changed from none to all.

also you need to create a .htaccess file with the following values:

<ifmodule mod_rewrite.c>
  rewriteengine on
  rewritecond %{request_filename} !-f
  rewritecond %{request_filename} !-d
  rewriterule . /your_directories/index.html [l]
</ifmodule>

also into your apache configuration you need to set the virtual directory where you will add your app and inside directory tag add the following lines:

<directory "/your_virtual_path_directory">
   rewritebase /
   options indexes followsymlinks
   allowoverride all
   require all granted
</directory>

i hope i have helped

score:3

i also had this problem before. perfectly fine on localhost, but refreshing on non-root routes or directly typing non-root url's always gave me 404. it came to conclusion that it cannot find non-root directories on it's own as react only has index.html as its html document and needs some rewriting rules.

in my case, my host is using apache and adding .htaccess to my web root directory with the following content worked:

<ifmodule mod_rewrite.c>
  rewriteengine on
  rewritecond %{request_filename} !-f
  rewritecond %{request_filename} !-d
  rewriterule . /index.html [l]
</ifmodule>

for nginx, you need to of course modify the nginx configuration. i found one answer here and it looks much simpler than the apache one: react-router and nginx

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

basically you need to tell the web server to forward all requests to your react's index.html, and therefore letting react-router handle the routing.

other solution is to use hashrouter, but will result in some ugly url.


Related Query

More Query from same tag