如何在ReactJS应用内嵌入外部网站而不跳转至新页面？

window.location.replace()是浏览器级别的整页跳转API，调用后必然卸载当前React应用，直接加载目标地址，根本不可能实现应用内嵌套外部站点的效果。

站内嵌入外部站点的标准方案是使用iframe标签承载外部页面，完全适配现有React Router路由逻辑，不需要额外引入第三方依赖。

1. 编写站点嵌入组件 #

新建独立路由组件，用全屏iframe加载目标公网站点：

// src/pages/SearchEngineEmbed.jsx
const SearchEngineEmbed = () => {
  return (
    <div style={{ width: '100%', height: 'calc(100vh - 顶部导航栏高度)' }}>
      <iframe
        src="https://gkwhelps.herokuapp.com"
        style={{
          width: '100%',
          height: '100%',
          border: 'none'
        }}
        title="服务站点"
        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
      />
    </div>
  )
}

export default SearchEngineEmbed

前置约束：如果目标公网站点的服务端配置了X-Frame-Options: DENY/SAMEORIGIN响应头，或者CSP规则禁止跨域iframe嵌入，浏览器会拦截加载请求。这种情况没有前端绕过方案，必须修改目标站点的服务端配置，允许当前React应用的域名嵌入页面。

2. 替换原有路由配置 #

删除之前写的带跳转逻辑的/searchEngine路由，替换为指向嵌入组件：

// App.js 路由配置段
import SearchEngineEmbed from './pages/SearchEngineEmbed'

// React Router v6 写法
<Route path="/searchEngine" element={<SearchEngineEmbed />} />

// React Router v5 写法
// <Route path="/searchEngine" component={SearchEngineEmbed} />

3. 保留原有按钮逻辑 #

之前写的NavLink按钮代码不需要任何修改，点击后路由切换到/searchEngine路径时，会在当前应用布局内直接渲染iframe加载外部站点，不会触发整页跳转，应用的导航栏、全局状态都能正常保留。

• iframe加载空白：打开浏览器控制台查看安全报错，优先排查目标站点的X-Frame-Options、CSP响应头配置
• 页面出现双滚动条：调整iframe外层容器的高度计算值，保证容器高度刚好适配内容区域，不要超出视口
• iframe内交互异常：按需调整sandbox属性的权限配置，补充对应操作需要的权限值即可。

内容的提问来源于stack exchange，提问作者gks