reactjs – React Router 4阻止iframe网址

发布时间：2020-12-15 20:19:57 所属栏目：百科来源：网络整理

导读：我有一个反应项目,我有一个横幅库,我使用反应路由器4在不同的客户,年和活动之间导航 BrowserRouter div Switch Route path="/:client/:year/:campaign/:banner" exact component={bannerPage} / Route path="/:client/:year/:campaign" exact component={cam

我有一个反应项目,我有一个横幅库,我使用反应路由器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帧来渲染实际横幅而没有别的

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

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

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

解决方法

我并不完全确定你是什么意思“拦截iframe的src”,但我会假设你指的是服务器上的行为因为我看不出你所描述的与客户有什么关系边码.

一般来说,服务器上的React Router的工作方式是使用catch all处理程序来匹配除静态内容之外的所有内容.您可以通过在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时提供一些不同的内容,则需要在catch all之前添加一个处理程序.如果没有关于服务器设置的更多信息,我不确定它会是什么,但是这样的话：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!