如何让网站显示在我的 reactjs 应用程序的正文中？

Question

I created a site that I hosted on the web, now I would like to create a button that allows the user to access this site directly in my reactjs application without having to be redirected to another page in my navigator. For this I wrote the following code:

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

and I inserted this code in my App.js file:

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

It did create a button but whenever I click on it I automatically quit my reactjs app and get redirected to the other site. Yet what I would like is for my site to be wrapped in my reactjs application. I have uploaded the solution on some stack overflow questions and on this blog but without success.

Answer 1

Off the top of my head, an iFrame would be the best way to achieve this.

Here is an example of how it could work:

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

You may also need to apply styling to make the iFrame fit to the entire page or just a certain area.

You can learn more about iFrames at this W3 Schools article .