score:0
this error appears as nginx cannot match a file on the provided path home#/transactions
.
since you haven't provided your nginx.conf
file. my assumption would be that you are missing a fallback in the try_files
directive or the entire directive.
as you mentioned you are using create-react-app
, that means your build output is a single index.html
file and a bunch of static assets.
the following rule should match the static asset if it finds it and fallback to index.html
if it doesn't exist, from where your frontend router will take care of the rest and show you the correct page.
try_files $uri $uri/ /index.html;
update (op added nginx.conf):
the provided nginx.conf
file's location
block is not valid. location
should be specified under a server
block.
i noticed that in your nginx.conf
file you are importing multiple other confs and it would've been useful to also add those since they might have an effect on the outcome. this import in particular caught my attention:
include /etc/nginx/conf.d/*.conf;
this path can match default.conf
if present, but i'm just guessing at this point. if it did and default.conf
was unaltered, that would explain the behavior you are describing since default.conf
looks like this:
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the php scripts to apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the php scripts to fastcgi server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param script_filename /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
there are a few possible solutions (assuming default.conf
causes the issue):
- add
try_files
to the default config like so:
# default.conf
server {
...
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}
if
default.conf
is shared with other configs, this is breaking for them
- (preferred) omit the import of
default.conf
and add a custom server tonginx.conf
. a server as simple as this will do the trick:
http {
...
server {
listen 80; # port
server_name _; # name
root /usr/share/nginx/html; # build dir
try_files $uri $uri/ /index.html;
index index.html;
}
}
Source: stackoverflow.com
Related Query
- nginx + react static build path can't be accessed on direct url hit
- react build with gh-pages generates wrong file path to static files
- How to change production build static folder path in a React project?
- How should I set my WebSecurityConfig antMatcher to permit all frontend Router URL if I want to serve static React build files through Spring Boot
- react routing is able to handle different url path but tomcat returns 404 not available resources
- Build React app generate static files with chunk suffix
- react native ios build succeeds but path to app bundle is wrong
- Serving react static files in golang gin-gonic using go:embed giving 404 error on reloading on frontend URL
- Cannot use url to navigate in react through nginx
- Express not serving static files correctly for react build
- Get React root url path
- How to match ambiguous path and static path with React Router
- Trying to deploy my REACT Webpack app to heroku. Everything works locally and the heroku build works. But I'm getting a 404 nginx
- Express, how to pass long url path to react router?
- react app loading asset from incorrect file path when accessed from nested route
- How to build programmatically the path for object data in React
- How to pass id in path url as component property in react router v6
- How to setup the url of the backend site on react build for production
- React router does not render route when URL accessed directly
- How to fix path error when a react build application is deployed in apache tomcat
- react router public path url
- CORs error AFTER deploying React App and separate Node API to production Unbuntu server where React static files are servered with NGINX
- How to remove path from import filenames in react for NPM build
- react dynamically build href file URL using map() method
- React Router persistant company in URL path and dynamic change
- React router - How to redirect to child component if parent component path is entered in url
- React Router: change URL path on goBack()
- 404 Error: unable to serve static react build with django rest framework, unless I go to /index.html
- Why is my nginx routing my react app static files to my index.html
- Serve React build files from two different static build directories
More Query from same tag
- how to render content with react-bootstrap correctly?
- React js remove third party rendered html
- How to properly define *.d.ts (typings) files for plain JavaScript react components
- Why does not the background color get applied from props using state for a styled component div using react and typescript?
- React: What happens on consecutive renders where a list shuffles?
- action redux is undefined, did not get the data
- TypeError: Cannot read property 'quote' of undefined React js
- How to reheat d3 force simulation in React.StrictMode?
- React not responding to observable when logging in
- How do I delay passing props until setState() is finished?
- Passing data from parent to child reactjs?
- TS types for rows in custom re-usable table component
- React Speedometer percentage value formatting shows too many decimals
- cant use jsonwebtoken with latest version of react
- Trying to return jsx from an event handler onSubmit of the form
- React - Redux dispatcher not mapping
- Using base state with hooks in React
- Style list elements using emotion
- Can't add new product to mongodb, having POST 500 error
- What's the correct way to type an onChange handler for input type files?
- event.stopPropagation fails to stop bubbling up to parent
- A valid react element or null must be returned -- Reactjs error
- React-Bootstrap set value of FormControl Select
- Show Button only particular area while scrolling
- how can export material-ui table to CSV?
- Why handlesubmit is not working on this react-hook-form implementation?
- Fetch data and set the state. Then make the data available to the app using the context api
- React + Redux - Update local state on store change => infinity loop
- React: Dynamically Rendering Nested Images
- Using routing info outside of the React Component