反应 - 在反应应用程序上刷新页面不起作用

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

Answer 1

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.