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

【问题标题】：Navigate to plain HTML page from react page从反应页面导航到纯 HTML 页面
【发布时间】：2018-07-26 16:18:52
【问题描述】：

所以我有我的单页反应应用程序，我正在尝试实现一个按钮，当单击它时，它会加载一个完全不同的页面，该页面具有它自己的 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'/>
            )
        }

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

我只想有一个按钮，当完全点击它时，它会离开我的反应页面并加载这个单独的 html 页面。它们在同一个项目中，因此它不会加载 URL，而是加载 HTML 文件。

【问题讨论】：

您要渲染html 页面吗？当单击一个按钮时？你想在反应应用程序或不同的选项卡中呈现该页面

标签： javascript html reactjs

【解决方案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>
         )
     }

希望有帮助

【讨论】：

【解决方案2】：

您正尝试在 iframe 中加载新页面，这就是它以这种方式发生的原因。如果要导航到新页面，请使用

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

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

【讨论】：