如何使用 React Router 在 React 应用程序中呈现本地页面的 iframe Dom

Question

我正在创建一个基于 this 模板的 React JS 无服务器应用程序，在页面中我需要包含一个 iframe 来呈现 HTML 文件。

iframe 应该有一个类似 ./public/myfolder/index.html 的来源（您可以从下面的“结构”中看到）。

问题是 iframe 渲染了一个 404 页面，我认为这是因为我的路由配置（如下所示）。

结构：

/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;

我不知道如何在 React Router 中声明 HTML 页面路径 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;

基本布局

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

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

export default BaseLayout;

现在，在我的反应页面“概述”中，我尝试了这样的 iframe：

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

但是内部 iframe 显示 404 页面。

我也试过：

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

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

没有任何效果。如何更改路由以正确呈现 iframe 元素？

Answer 1

在您的 Router -> routes 中，您必须删除此行：path: '*'.

那么你必须再试一次相对路径和url之间的一种解决方案：

src="./myfolder/index.html" 

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

如何使用 React Router 在 React 应用程序中呈现本地页面的 iframe Dom

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

iframe

reactjs

react-router-dom