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.
Source: stackoverflow.com
Related Query
- 404 Error on refresh with SPA React Router app in GitHub Pages
- react router app hosted on firebase issues 404 error only when trying to access route via address bar
- Refresh react app, 404 error. React router issue
- React Router Dom Issue - localhost:3000/products to localhost:3000/products/2 is working fine but when I refresh page then I get some error in console
- How do I avoid 404 error in deployed react app when I refresh page?
- React Router V4 - 404 error on refresh - Nginx issue?
- React production router 404 after deep refresh firebase
- Reload the page gets 404 error using React Router
- React App returns error after refresh
- 404 Error when deploying React App on custom domain
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- I receive error 404 on refreshing browser using React router in Laravel Mix
- React Router Gives 404 error on production
- React Router dom and Google webcache content 404 error
- Getting 404 with react router app with nginx
- Deploying React express App on Google app engine: 404 error
- Gatsby React app error Refresh Babel transform should only be enabled in development environment
- React NextJS Firebase error refresh Firebase App named '[DEFAULT]' already exists
- React Routing 404 error on IIS when you hit refresh
- 404 Not Found error in preflight OPTIONS when executing a PUT method in CakePHP API with axios in React App
- Apache Error 404 in react app even after adding .htaccess
- React Router redirect on error 404
- Deployed React App to IONOS - 404 on page refresh
- I am getting such GET ERR_ABORTED 404 error after deploying react app to github
- React Router refresh 404 with Nginx
- React app on Vercel - 404 not found error after adding Web Worker
- React Router App gets 404 on reload of subpage - serverless, no webpack
- C# ASP:NET MVC back end - Change from React Router v4 HashRouter to BrowserRouter results in 404 on refresh
- React Router throwing 404 on Azure Linux Web App
- React Router URL not found if refresh page - Create React App
More Query from same tag
- Eslint error: Missing parentheses around multilines JSX react/jsx-wrap-multilines
- react-router-dom <Link> changes route but doesn't render until user clicks page
- Multiple Fetch requests to set state in React
- Triggering a function in a React parent functional component from its child
- Html Icon not shown beside title
- Use external data in XState FSM
- cannot update a component (yyy) while rendering a different component (yyy)
- Setting value for React context values with React testing library
- next-routes server.js fails: TypeError: routes.getRequestHandler is not a function
- JSX not returning expected HTML
- Cordova iOS build white screen
- react.js handling multyple checkbox fields
- React + Backbone, Target container is not a DOM element
- Render object in React js grouped by key
- How to determine with what values is a div overflowing in all the directions?
- Best way to create a Wizard component in React
- Rendre footer component all page except 404 pages in react
- How to expand div from center instead of top left
- about react javascript grammar const syntax
- Custom hooks not working properly with useEffect
- Why is my home page component rendering on every route?
- How to store client in redux?
- React/redux: I have to reload page to delete
- Sliding card from left side when clicked on button in react
- CORS error while consuming calling REST API with React
- Inside an array, how to check forript?
- React Material UI 1.0 Select multiple params onChange
- getValue() for SelectField
- Next Js Router beforePopState , access state of component in handler
- How to redirect page after login using react-router-dom?