How to render an iframe of local page within React app using React Router Dom

Question

I'm creating a React JS serverless app based on this template, inside a page I need to include an iframe to render an HTML file.

The iframe should has a source like ./public/myfolder/index.html (as you can see from "Structure" below).

The problem is that the iframe render a 404 page instead, I think it's because of my routes configuration (as here below).

Structure:

/public
 /myfolder
  index.html //src for the iframe

/src
 App.js
 router.js
 /content
  /overview
   index.js //iframe page

App.js

import React from 'react';
import { useRoutes } from 'react-router-dom';
import routes from './router';
import ThemeProvider from './theme/ThemeProvider';

const App = () => {

    const content = useRoutes(routes);

    return (
        <ThemeProvider>
        { content }
        < /ThemeProvider>
    );
}
export default App;

I don't know how to declare the HTML page path inside React Router Dom.

Router.js

import { Suspense, lazy } from 'react';
import { Navigate } from 'react-router-dom';
import BaseLayout from 'src/layouts/BaseLayout';

const Overview = Loader(lazy(() => import('src/content/overview')));

const Status404 = Loader(lazy(() => import('src/content/pages/Status/Status404')));

const routes = [
    {
        path: '*',
        element: <BaseLayout />,
        children: [
            {
                path: '/',
                element: <Overview />
            },
            {
                path: 'overview',
                element: (
                    <Navigate
                        to="/"
                        replace
                    />
                )
            },
            {
                path: 'status',
                children: [
                    {
                        path: '/',
                        element: (
                            <Navigate
                                to="404"
                                replace
                            />
                        )
                    },
                    {
                        path: '404',
                        element: <Status404 />
                    },
                ]
            },
            {
                path: '*',
                element: <Status404 />
            },
        ]
    },
];

export default routes;

Baselayout

import { Outlet } from 'react-router-dom';

const BaseLayout = ({ children }) => {
  return <>{children || <Outlet />}</>;
};

export default BaseLayout;

Now, inside my react page "Overview", I tried an iframe like this:

<iframe
    id="myIframe"
    src="./myfolder/index.html"
    width="100%"
    height="100%"
    frameBorder="0"
    title="myIframe"
/>

But the inner iframe shows me a 404 page.

I tried also:

src="./public/myfolder/index.html" 

src="http://localhost:3000/public/myfolder/index.html"

Nothing work. How can I change my routes to render my iframe element correctly?

Answer 1

Inside your Router -> routes you have to remove this line: path: '*'.

Then you have to try again one solution between relative path and url:

src="./myfolder/index.html" 

src="http://localhost:3000/myfolder/index.html"