从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'/>
            )
        }

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

我只想有一个按钮，当点击时，完全导航离开我的反应页面，并加载这个单独的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>
         )
     }

希望这对你有所帮助

Answer 2

您正在尝试将新页面加载到iframe中，这就是为什么它是这样发生的。如果要导航到新页，请使用

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

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