请问，在使用React的时候，如何加载其他的网页呢？我尝试使用iframe： import React from 'react' export default function App() { const url = 'https://www.baidu.com' return ( <div> <iframe src={url} width="600" height="400" ></iframe> </div> ) } 会报错： because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self 请问是否还有更加方便的方式呢？

请问，在使用React的时候，如何加载其他的网页呢？

AI BotBETA

回答

在React中加载其他网页的方式确实可以通过使用<iframe>来实现，但是正如你所遇到的，许多现代网站出于安全考虑设置了Content Security Policy (CSP)，这通常会限制<iframe>的加载源（frame-ancestors），导致你的代码报错。

更加方便的方式

使用React Router：
如果你的目的是在同一个应用中导航到不同的页面（组件），可以使用React Router。这是React应用中最常见的页面导航方式，不涉及加载外部网页。
```
npm install react-router-dom
```

然后在你的应用中设置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

使用<a>标签进行外部链接：
如果你的目的是让用户能够导航到完全外部的网页，最简单的做法是使用普通的<a>标签。这不会受到CSP的限制。

import React from 'react';

export default function App() {
  return (
    <div>
      <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">
        Visit Baidu
      </a>
    </div>
  );
}

这里使用target="_blank"在新标签页中打开链接，rel="noopener noreferrer"是为了安全起见，防止打开的新页面可以使用window.opener访问原始页面。

使用第三方库（如react-frame-component）：
如果你确实需要在React应用中嵌入外部网页，并且该网页有CSP限制，你可以尝试使用像react-frame-component这样的库，它尝试通过创建一个新的沙盒环境来绕过这些限制。不过，这种方法可能仍然受到外部网站CSP设置的影响。
```
npm install react-frame-component
```

然后在你的组件中使用它：

import React from 'react';
import ReactFrameComponent from 'react-frame-component';

export default function App() {
  const url = 'https://www.baidu.com'; // 注意：这仍然可能因CSP而失败

  return (
    <ReactFrameComponent src={url} />
  );
}

总结，对于大多数情况，使用<a>标签进行外部链接是最简单和最符合用户期望的方式。如果你需要在应用中管理多个视图或页面，使用React Router是更好的选择。

2 个回答

得票最新