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

Question

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.

Answer 1

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;
}