iFrame 正在加载 index.html 而不是 src 中指定的本地 html 文件

Question

我有一个包含很多页面的 React 项目。

一个页面包含一个必须加载本地 HTML 文件的 iframe。相反，它加载 index.html 文件（主页）。

我正在为路由和 links 使用“react-router-dom”。

我认为问题在于将 HTML 文件的 link 重定向到主页文件。

如果这是问题所在，我该如何在调用所需的 HTML 文件时禁用重定向到主页？

编辑：

HTML 文件是第三方 SDK 包的一部分，无法转换为 React 组件。

Answer 1

如果文件是第三方库

考虑将其放入 public 目录并使用 PUBLIC_URL 访问该文件。

<iframe src=`${process.env.PUBLIC_URL}/bundle/test.htm` ... />

如果需要加载其他组件

加载直接呈现页面的组件，而不是执行 iframe。这样你就不会受限于基于路径的规则。

如果你想要基于路径的规则

考虑添加嵌套路由： https://v5.reactrouter.com/web/example/nesting

或者v6路由：https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

不要故意破坏 react-router，而是在限制范围内工作。

如果是外部路由，我建议使用绝对路径；然而，因为它是一个内部 link 它仍然会符合反应路由器。或者使用 public 文件夹。

Answer 2

在 React 应用程序中看到您只能路由组件。例如，在你的反应应用程序的 app.js 中你做

App.js

import { BrowserRouter, Routes, Route, } from 'react-router-dom'
function App(){
   return(
      <BrowserRouter>
        <Routes>
           <Route exact path='/' element={<Your_component />} />
        </Routes>
      </BrowserRouter>
   )
 }

The Problem

根据我，在反应中你可以通过组件路由。如果您尝试通过编写 URL = 'localhost:3000/another-html-file.html' 来路由另一个文件。它试图在 app.js 路线中找到 URL 但它无法找到它并且你看到它找不到它因此，它总是 returns 主页所以你只能看到index.html(主页).

The solution

如果你想在另一个HTML文件中路由。 1 - 尝试将其构建为一个组件，以便 React 应用程序可以轻松地在其中进行路由。 2 - 尝试仅为 HTML 文件设置另一个路由系统，这可能很困难，因为您的 React 应用程序始终从包含所有文件作为 JS 扩展的 src 文件运行。我更喜欢第一个。希望对您有所帮助。

iFrame 正在加载 index.html 而不是 src 中指定的本地 html 文件

iFrame is loading index.html instead of local html file specified in the src

reactjs

iframe

react-router