score:1
ok, after reading tons of answers on so i finally got it to work.
firstly, a great answer from user @panther here react.js application showing 404 not found in nginx server
when your react.js app loads, the routes are handled on the frontend by the react-router. say for example you are at http://a.com. then on the page you navigate to http://a.com/b. this route change is handled in the browser itself. now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.
to avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser.
so, as he recommended i've changed my config like
location / {
try_files $uri $uri/ /index.html @backend;
}
location @backend {
proxy_pass http://localhost:8080;
}
but this gave me some weird errors.
so i have to write location for every path i have, like this:
location / {
try_files $uri $uri/ @backend;
}
location /devices { // here my path is similar as in react
// router
try_files $uri $uri/ /index.html;
}
Source: stackoverflow.com
Related Query
- Create react app served with nginx and oauth gives me refresh page issue
- serve react create app and Nodejs app with reverse proxy Nginx
- Create react app breaks after deployment on refresh 404 with Nginx
- Create React App Dependency Issue with Webpack
- CORS Issue with React app and Laravel API
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Nginx and Create React App (with React Router) full routes not working
- Create React App with TypeScript and NPM Link: Enums causing Module parse failed
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- Create React App with Storybook creating webpack issue
- How to determine the order of css in my create react app build with webpack and customize-cra?
- How to conect docker nginx with express and react app on windows
- Problem with npm build and babel in React Create App
- Create react app with npx that uses classes and not hooks
- Issue with web pack when trying to create React App
- CORs error AFTER deploying React App and separate Node API to production Unbuntu server where React static files are servered with NGINX
- React app served with express and helmet cannot make API requests
- Create React App PWA ERROR: Does not register a service worker that controls page and start_url
- How to display value in real time without refresh page with React and SocketIO?
- My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually
- How to create a new page and route programatically in React.js with React Router
- React Router URL not found if refresh page - Create React App
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- Issue with .env being undefinde when using create react app --template typescript?
- Issue with img loading and border property in react app with css
- React router with lazy and Suspense always falls back on wildcard route on page refresh
- Why is the user not persisted on a page refresh with Firebase and Firebase React Hooks?
- How to send requests to a nodejs backend from a React app served by nginx with ssl configured
- React app running in docker container being served with nginx is blank
- Issue with homepage while deploying create react app
More Query from same tag
- Where to initialize semantic ui dropdown menu in a React application?
- How to output php code block in reactjs?
- How do I change the background color of the body?
- React Material UI Autocomplete event listener issue
- Mobx React Return Store without Component
- Pass value from class method to a react component
- React hook form with react-select as required field
- react-image-gallery doesn't apply styles
- Command "yarn run build" exited with 1. Vercel deploy
- How to linkify hashtag in react
- React Catch-All with Separate Pages
- React-Native render a Card Component using FlatList not working
- Render element using map in React
- Populating controlled inputs in React
- How to retrieve the value of SELECT tag in reactjs?
- typescript react, dynamic props based on a certain prop value?
- Converting function React component to class component
- How to dynamically change a function's name
- React Konva share ref between sibling components throws error
- mapDispatchToProps and directly calling dispatch function in component
- playing s3 audio and downloading the file in react component
- check if an object with a specific key value exists in an array of objects
- Installing react-redux in a Rails project
- How to return what's being entered in input - JavaScript/React
- How to style Semantic UI disabled button
- set every element value to false except one value in javascript object
- Why shouldn't you use import all in ES6
- SVG <textPath> not showing up (with ReactJS)
- How to extend TS interface for (MUI) React Component using styled-components?
- using onClick with array map in Dynamic menu ( ReactJS)