Question

我对React很陌生。我正在练习一些反应，并被要求将网站嵌入iframe中，因此我创建了一个可重用的功能组件，该组件接收作为父项的prop传入的网站的url。

父级具有几个Route元素，它们可以根据我在另一个组件上的某些链接来呈现不同的内容iframe。为了能够将网址传递给iframe组件，我使用了带有渲染的Route而不是组件。问题在于，将渲染与iframe一起使用会破坏浏览器的历史记录。

我需要按两次返回以实际转到历史记录中的上一个组件，而在按这两个后退按钮之一时，它实际上会重新显示整个页面。从iframe组件向后导航到上一个iframe组件时会发生这种情况（当您连续访问两个iframe组件并尝试通过浏览器后退按钮返回时），而在两次访问之间的浏览器历史记录中还有其他组件时，则不会发生这种情况iframe组件。

我可能做错了什么事

感谢您的帮助

这里是实际代码：

App.js

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/" exact={true} render={() => {return <Home/>}} />

            <Route path="/youtube" render={() => {return <IframeEmbeddable url="https://www.youtube.com/embed/b-I2s5zRbHg"/>}} />
            <Route path="/infobae" render={() => {return <IframeEmbeddable url="https://www.infobae.com/america/"/>}} />                <Route path="/reactComponent" render={() =>{return <ExampleForm />}} />
            <Route path="" render={() => {return <NotFound/>}} />
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

export default App;

Layout.js

const layout = (props) => {
    return (
        <React.Fragment>
            <div className="Header">
                <Toolbar/>
            </div>
            <div className="Content">
                {props.children}
            </div>
        </React.Fragment>
    );
} 

export default layout;

IframeEmbeddable.js

const iframeEmbeddable = (props) => {
    return <iframe src={props.url}
      width="100%"
      height="100%"
      id="myId"
      display="initial"
      position="relative" />;
}

export default iframeEmbeddable;

Toolbar.js

const toolbar = (props) => {
    return (
        <React.Fragment>
            <Link className="Button" to="/" >Home</Link>
            <Link className="Button" to="/reactComponent" >React Form   </Link>
            <Link className="Button" to="/libre" >Libre 1</Link>
            <Link className="Button" to="/libre" >Libre 2</Link>
            <Link className="Button" to="/libre" >Libre 3</Link>
            <Link className="Button" to="/youtube">Music Video</Link>
            <Link className="Button" to="/infobae">Infobae</Link>
        </React.Fragment>
    );
}

export default toolbar;

使用iframe通过路线渲染来反应路线历史

0 个答案: