title: React router with nginx
body: <p>I have troubles to setup nginx with react router. I have tried all suggested solutions I found but none of them seems to cover my use case.</p>
  
  <p>This is a structure on my filesystem served by nginx</p>
  
  <pre><code>/path/to/my/app
  |- v1.0/index.html
  `- v2.0/index.html
  </code></pre>
  
  <p>I have deployed several versions on my app, each is a standalone react app. </p>
  
  <p>Then there's one more thing to complete the puzzle. My react app does not run on domain root URL (like <code>example.com/v1.0</code>) but rather on <code>example.com/my-app/v1.0</code>. </p>
  
  <p>So I configured nginx like this</p>
  
  <pre><code>server {
    location ~ /my-app/([^/]+) { # capture version
      set $version $1; 
      root /path/to/my/app/$version  # directory where index.html is stored
      try_files $uri $uri/ /index.html
    }
  }
  </code></pre>
  
  <p>Accessing <code>example.com/my-app/v1.0</code> works fine but if the path contains a route in react (<code>example.com/my-app/v1.0/users</code>), nginx returns <code>404</code> because it wants to serve a file <code>/path/to/my/app/v1.0/users</code> which obviously is not present.</p>
  
  <p>Also it's worth to mention the my app does only work when accessed like <code>example.com/my-app/v1.0/</code> not like <code>example.com/my-app/v1.0/index.html</code>. The latter does not have any route configured.</p>