如何讓網站顯示在我的 reactjs 應用程序的正文中？

Question

我創建了一個托管在網絡上的站點，現在我想創建一個按鈕，允許用戶直接在我的 reactjs 應用程序中訪問該站點，而無需重定向到導航器中的另一個頁面。 為此，我編寫了以下代碼：

<Button
        component={NavLink}
        activeClassName={classes.activeBtn}
        to="/searchEngine"
        className={classes.buttonItemMiddle}
      >
        {location.pathname == '/searchEngine' ? (
          <Home fontSize="large" style={{ color: 'rgb(0,133,243)' }} />
        ) : (
          <HomeOutlined fontSize="large" />
        )}
      </Button> 

我在我的App.js文件中插入了這段代碼：

<Route path='/searchEngine' component={() => { 
                          window.location.replace('https://gkwhelps.herokuapp.com'); 
                          return null;
                          }}/>

它確實創建了一個按鈕，但是每當我單擊它時，我都會自動退出我的 reactjs 應用程序並重定向到另一個站點。 然而，我希望我的網站能夠包含在我的 reactjs 應用程序中。 我已經在一些堆棧溢出問題和這個博客上上傳了解決方案，但沒有成功。

Answer 1

在我的腦海中，iFrame 將是實現這一目標的最佳方式。

這是它如何工作的示例：

<iframe src="https://gkwhelps.herokuapp.com" title="App"></iframe>

您可能還需要應用樣式以使 iFrame 適合整個頁面或僅適合某個區域。

您可以在這篇W3 Schools 文章中了解有關 iFrame 的更多信息。