React - Doesn't work refreshing page on react app

Question

I am building front-end of marketplace using react. "react": "^17.0.2" "react-redux": "^7.2.5" "react-scripts": "4.0.3" @reach/router": "^1.3.4"

After built the app on local or netlify, when refreshing page(F5), it doesn't work and it returns blank page. In details, "404: The requested path could not be found" on local, and then blank page with console error on netlify.

But, it does work well on local dev(yarn start) and from clicking menu after built.

I had already tried to add "homepage":"." on package.json and _redirects file with /* /index.html 200 on root and build folder.

I am not sure whether it is build setting problem or @reach/router issue.

How can I fix this issue?

Hope to your quick help.

Thank you,

PS: Attached my issue screenshots.

Error on local

Error on netlify

Does this answer your question? [Netlify renders 404 on page refresh (using React and react-router)](https://stackoverflow.com/questions/58065603/netlify-renders-404-on-page-refresh-using-react-and-react-router) — StudioTime, May 12 '22 at 11:31

score 0 · Answer 1 · edited May 19 '22 at 19:33

0

create a .htaccess file in the public directory of your react project and paste the text below.

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

When built again and re-uploaded it should not have an error on reload.

edited May 19 '22 at 19:33

Martijn Pieters

1,048,767
296
4,058
3,343

answered May 11 '22 at 19:17

gavin

1,224
5
17

Tried as your mention, but, still same error – cuong48e May 11 '22 at 19:35
maybe this'll fix your problem... [How to fix Page Not Found on netlify](https://dev.to/kapi1/how-to-fix-page-not-found-on-netlify-a4i) – gavin May 11 '22 at 19:37
Already added _redirects file before your advice. it doesn't work. – cuong48e May 11 '22 at 19:45

React - Doesn't work refreshing page on react app

1 Answers1