title: How to configure Nginx with React Router HistoryLocation?
body: <p>I'm currently using Nginx as a reverse proxy and to serve my static assets. I was using React Router's HashLocation setting since it was the default and it allowed me to refresh on a route with no problems and no need for any additional configurations, but the issue with using that setting is the necessity of the url having /#/ prepending my routes (e.g. <a href="http://example-app.com/#/signup">http://example-app.com/#/signup</a>).</p>
  
  <p>I'm now trying to switch to React Router's HistoryLocation setting, but I can't figure out how to properly configure Nginx to serve index.html for all routes (e.g. <a href="http://example-app.com/signup">http://example-app.com/signup</a>). </p>
  
  <p>Here's my initial nginx setup (not including my mime.types file):</p>
  
  <p><strong>nginx.conf</strong></p>
  
  <pre><code># The maximum number of connections for Nginx is calculated by:
  # max_clients = worker_processes * worker_connections
  worker_processes auto;
  
  # Process needs to run in foreground within container    
  daemon off;
  
  events {
    worker_connections 1024;
  }
  
  http {
    # Hide nginx version information.
    server_tokens off;
  
    # Define the MIME types for files.
    include       /etc/nginx/mime.types;
  
    # Update charset_types due to updated mime.types
    charset_types
      text/xml
      text/plain 
      text/vnd.wap.wml
      application/x-javascript
      application/rss+xml
      text/css
      application/javascript
      application/json;
  
    # Speed up file transfers by using sendfile() to copy directly
    # between descriptors rather than using read()/write().
    sendfile      on;
  
    # Define upstream servers
    upstream node-app {
      ip_hash;
      server 192.168.59.103:8000;
    }
  
    include sites-enabled/*;
  }
  </code></pre>
  
  <p><strong>default</strong></p>
  
  <pre><code>server {
    listen  80;
    root    /var/www/dist;
    index   index.html index.htm;
  
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
      expires 1d;
    }
  
    location @proxy {
      proxy_set_header    Upgrade $http_upgrade;
      proxy_set_header    Connection "upgrade";
      proxy_set_header    Host $host;
      proxy_set_header    X-Real-IP $remote_addr;
      proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header    X-NginX-Proxy true;
  
      proxy_http_version  1.1;
      proxy_redirect      off;
      proxy_pass          http://node-app;
      proxy_cache_bypass  $http_upgrade;
    }
  
    location / {
      try_files $uri $uri/ @proxy;
    }
  
  }
  </code></pre>
  
  <p>This setup worked fine when I was using HashLocation, but after changing to HistoryLocation (the only change I made), I get back a 404 Cannot GET when attempting to refresh on a sub-route's url. </p>
  
  <pre><code>if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  } 
  </code></pre>
  
  <p>in the <code>location /</code> block. This allows me to refresh and directly access the routes as top locations, but now I can't submit PUT/POST requests, instead getting back a 405 method not allowed. I can see the requests are not being handled properly as the configuration I added now rewrites all my requests to /index.html, and that's where my API is receiving all the requests, but I don't know how to accomplish both being able to submit my PUT/POST requests to the right resource, as well as being able to refresh and access my routes.</p>