nginx how to configure nginx to nevigate to a subpage for reactjs app

nginx how to configure nginx to nevigate to a subpage for reactjs app - If a page has internal and external outgoing links to redirecting URLs, it’s returning 3xx (301, 302, etc.) HTTP status codes standing for redirection. This issue means that the page does not exist on a permanent or temporary basis. It appears on most of the popular web browsers, usually caused by a misconfigured website. However, there are some steps you can take to ensure the issue isn’t on your side. You can find more details about redirecting URLs by reading the Google Search Central overview. In this article, we’ll go over how you can fix the nginx how to configure nginx to nevigate to a subpage for reactjs app error on your web browser. Problem :

I have following nginx setup where I used proxy configuration to redirect my landing page (built with reactjs) to my domain, say (www.example.com), here is my nginx configuration

server 
listen 80;
listen [::]:80;
server_name www.example.com;

location / {
    proxy_pass http://127.0.0.1:8000;
}

........
........

no problem with the above configuration if I request on www.example.com, it give me the redirected web page(my landing page) hosted on http://127.0.0.1:8000. But if I try to navigate to a sub page like http://127.0.0.1:8000/orders, what should I do then? I tried the following

location /orders 
    proxy_pass http://127.0.0.1:8000/orders;

but it's not working if I request on www.example.com/orders, its always redirect me into the www.example.com (landing page), i.e http://127.0.0.1:8000.

Solution :

This is my way of handling routes in reactjs and nginx
I send every path to index.html and as a result reactjs is responsible for routes, and for that purpose I use reactrouter

location / 
    try_files $uri /index.html;

We hope that this article has helped you resolve the redirects, nginx, localhost error in your web browsers. Enjoy browsing the internet uninterrupted!