React Router 4 阻止 iframe url答案

【问题标题】：React Router 4 blocking iframe urlsReact Router 4 阻止 iframe url
【发布时间】：2018-02-27 12:10:22
【问题描述】：

我有一个 react 项目，其中有一个横幅库，我正在使用 react router 4 在不同的客户、年份和活动之间导航

<BrowserRouter>
  <div>
    <Switch>
      <Route path="/:client/:year/:campaign/:banner" exact component={bannerPage} />
      <Route path="/:client/:year/:campaign" exact component={campaignPage} />
      <Route path="/:client/:year" exact component={campaignIndex} />
      <Route path="/" exact component={clientIndex} />
    </Switch>
  </div>
</BrowserRouter>

在显示特定横幅的组件上，我有一个 i-frame 来呈现实际横幅，仅此而已

  render() {
    return(
      <div>
        <iframe src='data/client/year/campaign/banner'
        width="300px"
        height="250px"
        display="initial" >
        </iframe>
      </div>
    )
  }

但是当我尝试渲染横幅时，React Router 拦截了 iframe 的 src 并再次显示 index.html 页面，没有任何组件，因为路径不匹配任何路由

任何帮助将不胜感激！谢谢！

【问题讨论】：

标签： reactjs iframe react-router

【解决方案1】：

我不完全确定您所说的“拦截 iframe 的 src”是什么意思，但我会假设您指的是服务器上的行为，因为我看不出您所描述的内容与客户端代码有关。

一般来说，服务器上的 React Router 的工作方式是使用 catch all 处理程序来匹配除静态内容之外的所有内容。您可以通过在包罗万象之前定义静态内容来避免静态内容。

const app = express();
app.use('/static', express.static(__dirname + '/static'));
app.get('*', (req, res) => {
  res.sendFile(__dirname + '/static/index.html')
});
app.listen('8000');

现在，如果您的应用程序请求/data/client/year/campaign/banner 时需要提供一些不同的内容，您需要在全部捕获之前添加一个处理程序。如果没有有关您的服务器设置的更多信息，我不确定它到底会是什么，但如下所示：

const app = express();
app.use('/static', express.static(__dirname + '/static'));
app.use('/data', express.static(__dirname + '/data'));
app.get('*', (req, res) => {
  res.sendFile(__dirname + '/static/index.html')
});
app.listen('8000');

【讨论】：