React Router 4 blocking iframe urls

Question

I have a react project where I have a library of Banners, I am using react router 4 to navigate between the different clients, years, and campaigns

<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>

on the component that displays the specific banner I have an i-frame to render the actual banner and nothing else

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

but when I tried to render the banner, React Router intercepts the src of the iframe and displays the index.html page again with no components since the path didn't match any route

any help would be appreciated! thanks!

Paul S Paul S · Accepted Answer · 2017-10-30T23:57:35

I'm not completely certain what you mean by "intercepts the src of the iframe", but I'm going to assume that you're referring to behavior on the server because I can't see how what you describe would relate to client side code.

Generally speaking, the way that React Router on the server works is that you use a catch all handler to match everything but static content. You avoid static content by defining that prior to the 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');

Now, if you need to serve some different content when your application requests /data/client/year/campaign/banner, you will need to add a handler prior to the catch all. I'm not sure exactly what it would be without more information about your server setup, but something like this:

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');

React Router 4 blocking iframe urls

1 Answers