从反应页面导航到纯HTML页面

Question

因此，我有一个页面响应应用程序，并且我试图实现一个按钮，当单击该按钮时，它会加载一个具有自己的HTML，JS和CSS的整个页面。我以为我没有逻辑，但是当我单击按钮时，它只是再次加载了我的react应用并重置了所有状态，所以它永远不会离开。

由于某种原因，它实际上只是重新渲染了很小的一个。

它看起来像这样：

这是我使用的一般逻辑。

在我的状态下，我的加载页面状态最初设置为false。 loadPage: false

然后在我的页面上，我有一个按钮，当单击该按钮时会调用此功能

loadPage() {
    this.setState({
        loadPage: true
    });
}

最后在我的渲染函数中，如果状态显示，我是否可以加载外部页面

render() {
        if(this.state.loadPage){
            return (
                <iframe id="pageDiv" src='path to html file'/>
            )
        }

我遇到的问题似乎是当我单击按钮并更改状态时，应用会重新渲染，但同时会重置现有状态。

我只想有一个按钮，当单击COMPLETELY时，它会从我的react页面导航并加载此单独的html页面。它们在同一个项目中，因此不会像加载HTML文件那样加载URL。

Answer 1

我认为您需要像这样包裹在里面：

 render() {
     if(this.state.loadPage){
         return (
    <a href=" path to html file">
    <iframe id="pageDiv"/>
    </a>
         )
     }

或者您也可以使用react-r

import { Link } from "react-router-dom";

 render() {
     if(this.state.loadPage){
         return (
    <Link to=" path to html file">
    <iframe id="pageDiv"/>
    </Link>
         )
     }

希望获得帮助

Answer 2

您正在尝试将新页面加载到iframe中，这就是这种情况的原因。如果要导航到新页面，请使用

window.location = "/anotherpage";-用于同一域中的另一个页面

window.location = "http://newpage_url.com";-用于其他域中的页面