ReactJS SPA Reload Page Fails

[acrainier1]

Hi, I recently deployed a react website. It’s my first React and Netlify deployment

https://japanarchitected.netlify.com/

When I go to an endpoint in the SPA, and I reload in browser I get the failure message below.

For example: japanarchitected.netlify.com/language/kanjisearch

I’m assuming this is because my real URL ends at the .com/ Everything after that is react-router-dom routes internal to the SPA.

Page Not Found

Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

[perry]

Hi there,

Did you see this guide yet? This is the best place to start for “Page Not Found” issues.

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

This might also be relevant:

[Support Guide] Direct links to my single page app (SPA) don't work

Last reviewed by Netlify Support - August, 2023 If you’re building a Single Page Application (SPA), or an app that manages its own routes (url paths), you’ll want to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate: /* /index.html 200 You can read more information in our docs, which can be found here.

[acrainier1]

Hi Perry,

The direct links internally work fine. It’s when I reload that they fail.

My react router is fine.

[futuregerald]

Hi @acrainier1, actually @perry already linked you to [Support Guide] Direct links to my single page app (SPA) don't work, which is the problem you’re experiencing. You need to provide a _redirects file or netlify.toml redirects rule in order to use your client-side router. You don’t currently have any redirects deployed.