title: How to render an iframe of local page within React app using React Router Dom
body: <p>I'm creating a React JS serverless app based on <a href="https://github.com/bloomui/tokyo-free-black-react-admin-dashboard-js" rel="nofollow noreferrer">this</a> template, inside a page I need to include an iframe to render an HTML file.</p>
  <p>The iframe should has a source like <code>./public/myfolder/index.html</code> (as you can see from &quot;Structure&quot; below).</p>
  <p>The problem is that the iframe render a 404 page instead, I think it's because of my routes configuration (as here below).</p>
  <p>Structure:</p>
  <pre><code>/public
   /myfolder
    index.html //src for the iframe
  
  /src
   App.js
   router.js
   /content
    /overview
     index.js //iframe page
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from 'react';
  import { useRoutes } from 'react-router-dom';
  import routes from './router';
  import ThemeProvider from './theme/ThemeProvider';
  
  const App = () =&gt; {
  
      const content = useRoutes(routes);
  
      return (
          &lt;ThemeProvider&gt;
          { content }
          &lt; /ThemeProvider&gt;
      );
  }
  export default App;
  </code></pre>
  <p>I don't know how to declare the HTML page path inside React Router Dom.</p>
  <p><strong>Router.js</strong></p>
  <pre><code>import { Suspense, lazy } from 'react';
  import { Navigate } from 'react-router-dom';
  import BaseLayout from 'src/layouts/BaseLayout';
  
  const Overview = Loader(lazy(() =&gt; import('src/content/overview')));
  
  const Status404 = Loader(lazy(() =&gt; import('src/content/pages/Status/Status404')));
  
  const routes = [
      {
          path: '*',
          element: &lt;BaseLayout /&gt;,
          children: [
              {
                  path: '/',
                  element: &lt;Overview /&gt;
              },
              {
                  path: 'overview',
                  element: (
                      &lt;Navigate
                          to=&quot;/&quot;
                          replace
                      /&gt;
                  )
              },
              {
                  path: 'status',
                  children: [
                      {
                          path: '/',
                          element: (
                              &lt;Navigate
                                  to=&quot;404&quot;
                                  replace
                              /&gt;
                          )
                      },
                      {
                          path: '404',
                          element: &lt;Status404 /&gt;
                      },
                  ]
              },
              {
                  path: '*',
                  element: &lt;Status404 /&gt;
              },
          ]
      },
  ];
  
  export default routes;
  </code></pre>
  <p><strong>Baselayout</strong></p>
  <pre><code>import { Outlet } from 'react-router-dom';
  
  const BaseLayout = ({ children }) =&gt; {
    return &lt;&gt;{children || &lt;Outlet /&gt;}&lt;/&gt;;
  };
  
  export default BaseLayout;
  </code></pre>
  <p>Now, inside my react page &quot;Overview&quot;, I tried an iframe like this:</p>
  <pre><code>&lt;iframe
      id=&quot;myIframe&quot;
      src=&quot;./myfolder/index.html&quot;
      width=&quot;100%&quot;
      height=&quot;100%&quot;
      frameBorder=&quot;0&quot;
      title=&quot;myIframe&quot;
  /&gt;
  </code></pre>
  <p>But the inner iframe shows me a 404 page.</p>
  <p>I tried also:</p>
  <pre><code>src=&quot;./public/myfolder/index.html&quot; 
  
  src=&quot;http://localhost:3000/public/myfolder/index.html&quot;
  </code></pre>
  <p>Nothing work. How can I change my routes to render my iframe element correctly?</p>