React App /index.html doesn't work directly

Support
, , , ,
#1

If I try to reach my react app by its url https://mysite.netlify.com it works. However if I type https://mysite.netlify.com/index.html I see a blank page. I don’t see any error in the console. I also check the source code and html is there, it just doesn’t render. I have following redirects file

/* /index.html 200

#2

Without being able to debug or see code, I can take a guess of what is happening here. This is expected behavior with the rewrite rule for a SPA.

The rewrite /* /index.html 200 is doing the following:

  • Looks for anything after / and ignores it (unless the asset exists)
  • Does not change the path input (no matter what it is)
  • Gives you the index.html file instead of the path shown.
  • Does NOT ignore the file if it exists (index.html does exist)
  • If the asset exists, response is the asset (needed for images, css, js, etc)

What is wrong then?

The React app is resolving the route as /index.html and doesn’t have a resolution for that path.

How do you fix it?

Make sure Pretty URLs is turned on for the site in Netlify, so the path is taken care of automatically.

image
image.png1159×175 13.3 KB

If for some reason the site can’t have pretty urls turned on, you can always make a redirect for it yourself prior to the rewrite rule.

1 Like