title: How to exclude .html extension in React router path?
body: <p>I'm creating a simple healthcheck for my app. So far I've created it like this:</p>
  <p>Routes:</p>
  <pre><code>&lt;BrowserRouter basename=&quot;/&quot; history={history}&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;health-check.html&quot; element={&lt;HealthCheck /&gt;} /&gt; //THIS IS MY HEALTHCHECK PAGE
          &lt;Route element={&lt;MainLayout pathname={history.location.pathname} /&gt;}&gt;
            &lt;Route path=&quot;login&quot; element={&lt;Login /&gt;} /&gt;
            &lt;Route path=&quot;app/reports/*&quot; element={&lt;PrivateRoute component={Reports} /&gt;} /&gt;
            &lt;Route path=&quot;app/builder&quot; element={&lt;PrivateRoute component={Builder} /&gt;}&gt;
              &lt;Route path=&quot;&quot; element={&lt;Navigate to=&quot;categories&quot; replace /&gt;} /&gt;
              &lt;Route path=&quot;categories&quot; element={&lt;PrivateRoute component={Categories} /&gt;} /&gt;
              &lt;Route path=&quot;categories/:reportingCategoryId&quot; element={&lt;PrivateRoute component={CommentariesList} /&gt;} /&gt;
              &lt;Route path=&quot;commentaries/new&quot; element={&lt;PrivateRoute component={CommentaryNew} /&gt;} /&gt;
              &lt;Route path=&quot;commentaries/:commentaryId&quot; element={&lt;PrivateRoute component={CommentaryEdit} /&gt;} /&gt;
              &lt;Route path=&quot;slider&quot; element={&lt;PrivateRoute component={Slider} /&gt;} /&gt;
              &lt;Route path=&quot;uwec&quot; element={&lt;PrivateRoute component={WeeklyCalendar} /&gt;} /&gt;
              &lt;Route path=&quot;return-expectations-chart&quot; element={&lt;PrivateRoute component={ReturnExpectationsChart} /&gt;} /&gt;
            &lt;/Route&gt;
          &lt;/Route&gt;
  
          &lt;Route path=&quot;*&quot; element={&lt;RedirectToApp /&gt;} /&gt;
        &lt;/Routes&gt;
  </code></pre>
  <p>Healthcheck component:</p>
  <pre><code>import { Navigate } from 'react-router'
  
  const HealthCheck = () =&gt; &lt;Navigate to={process.env.PUBLIC_URL + '/healthcheck.html'} /&gt;
  
  export default HealthCheck
  </code></pre>
  <p>And the healtcheck.html in my public folder that simply returns harcoded text:</p>
  <pre><code>status:200
  </code></pre>
  <p>All seems fine with these structure but the problem is I need to access the healthcheck url like this <strong>myurl.com/healthcheck.html</strong></p>
  <p>Unless I append the html extension at the end that's the only way I can access the page. If I modify my path in my routes to like this one, without the .html extension, then I get 404 not found.</p>
  <pre><code>&lt;Route path=&quot;health-check&quot; element={&lt;HealthCheck /&gt;} /&gt; //THIS IS MY HEALTHCHECK PAGE
  </code></pre>
  <p>As much as possible I'd like my path to be just /healthcheck, without the html extension. By the way I made use of plain html file in the public folder so that my healthcheck page will not use bootstrap style. Thanks of any help.</p>