title: React JS App Routing Issue Only After Deploying to Azure Web App
body: <p>I have a React JS app, with React Router.During development, npm start, I get no issues. I visit the following location as usual.</p>
  <pre><code>http://localhost:3000 
  </code></pre>
  <p>and due to the routing code, it becomes</p>
  <pre><code>http://localhost:3000/index
  </code></pre>
  <p>and the app loads just fine. At this point,</p>
  <ul>
  <li>I hit reload, the app continues to run fine.</li>
  <li>I manual link or load 'http://localhost:3000/index', the app runs fine.</li>
  </ul>
  <p>Then, later, I do an npm build, go inside this build folder, and do an npm start, again, the same thing. the app runs just fine. I reload, it runs fine. Nothing to complain so far.</p>
  <p><em>Problem Portion.</em></p>
  <p>I then decided to deploy the app to an azure web app. The app runs fine. I go to this site.</p>
  <pre><code>https://randomstuffreactjsappsept24.azurewebsites.net
  </code></pre>
  <p>and due, to routing code, it becomes</p>
  <pre><code>https://randomstuffreactjsappsept24.azurewebsites.net/index
  </code></pre>
  <p>And, the website loads.</p>
  <p>At this point, if I hit reload (problem!!), it will try to reload,</p>
  <pre><code>https://randomstuffreactjsappsept24.azurewebsites.net/index
  </code></pre>
  <p>I get the following error.</p>
  <pre><code>The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
  </code></pre>
  <p>Now, at this point, if I remove the '/index' and load the original url,</p>
  <pre><code>https://randomstuffreactjsappsept24.azurewebsites.net
  </code></pre>
  <p>The site loads just fine, no problem. Note, you can see it for yourself. this is a live site. (but of course, due to routing code, it becomes)</p>
  <pre><code>https://randomstuffreactjsappsept24.azurewebsites.net/index
  </code></pre>
  <p>Now, as long as I dont reload the website, the website continues to run. Why is this happening?</p>
  <p>Here is the code for the main index.js page from the project.</p>
  <pre><code>ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;Switch&gt;
        &lt;Route path=&quot;/index&quot; render={(props) =&gt; &lt;Index {...props} /&gt;} /&gt;
        &lt;Redirect to=&quot;/index&quot; /&gt;
      &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p>The full app is available here - <a href="https://github.com/Jay-study-nildana/RandomStuffReactJSApp" rel="nofollow noreferrer">https://github.com/Jay-study-nildana/RandomStuffReactJSApp</a></p>
  <p><strong>Update 2</strong></p>
  <p>I decided to try another react app, created by another source entirely. Once again, same issue, and I have a live site to show.</p>
  <ul>
  <li>I visit, <a href="https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api" rel="nofollow noreferrer">https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api</a>, from within the web app, it works fine. If i were to reload at this point, it will say &quot;The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.&quot;</li>
  <li>I visit, http://localhost:3000/external-api, from within the app, it works fine. AND, If I were to reload, it loads just fine.</li>
  </ul>
  <p>So, its definitely &quot;only&quot; happening after deployment.</p>