Nginx Question posted in
The official documentation can be found here.

Nginx not showing custom 'Page Not Found' page in React app

ok, So, I have built a React app and deployed it under Nginx. So, far everything is working i.e. Nginx serves the site over HTTPS though in my React app, I use react-router-dom with a default route to my custom 404 page.. see below. The one with /* routes unhandled requests to my custom ‘Not Found’ page. This whole thing works fine when I just run react app locally i.e. by running "npm run" though after I deploy the static build to my web server where I have Nginx as a reverse proxy, any attempt to access valid secured pages (post login) or invalid page routes only shows Nginx default 404 page. My Nginx config is as per below..

include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  licenses.mydomain.como;
        return 301 https://$host$request_uri;
        #root         /usr/share/nginx/html;
        root         /srv/www/licenses;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        index  index.html index.htm;
    try_files $uri $uri/ /index.html =404;
        }

        error_page 404 /404.html;
            location = /404.html {
                root /usr/share/nginx/html;
                #internal;
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

const routes = [
{
    path: "/",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/home",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/changerequest/",
    exact: true,
    isPrivate: false,
    page: () => <ChangeRequestApplication />,
  },
  {
    path: "/approvalcoderequest",
    exact: true,
    isPrivate: false,
    page: () => <ApprovalCodeRequest />,
  },
  {
    path: "/staffapp/",
    exact: true,
    isPrivate: false,
    page: () => <StaffApplication />,
  },
{
    path: "/reports/spotsallocationspersite",
    exact: true,
    isPrivate: true,
    menuid: 24,
    page: () => <SpotsAllocationPerSite />,
  },
  {
    path: "*",
    exact: true,
    isPrivate: false,
    page: () => <NotFound />,
  },
];
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution in this SO post. Basically as per this post added below location segment to your ssl.conf or nginx.conf.

    location / {

  if (!-e $request_filename){

    rewrite ^(.*)$ /index.html break;

  }

}

  2. 0

    Remove the following section in your nginx.conf file:

    error_page 404 /404.html;
location = /404.html {
     root /usr/share/nginx/html;
     #internal;
}

    Since your react app handles the 404 page already.

    Replace the location block as follows:

    location / {
     index  index.html index.htm;
     try_files $uri $uri/;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search