javascript - 从 React 页面导航到纯 HTML 页面

Question

所以我有我的单页 React 应用程序，我正在尝试实现一个按钮，单击该按钮会加载一个拥有自己的 HTML、JS 和 CSS 的完全不同的页面。我以为我没有逻辑，但是当我点击按钮时，它只是再次加载我的 React 应用程序并重置所有状态，所以它永远不会离开。

它实际上只是出于某种原因重新渲染它非常小。

看起来像这样:

这是我使用的一般逻辑。

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

然后在我的页面上我有一个按钮，当点击它时调用这个函数

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

最后在我的渲染函数中，如果状态如此，我有一个 if 加载外部页面

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

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

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

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>
         )
     }

希望对你有帮助