Botkit embed with React + React-Router results in 404 error

With React 16 and React-Router 4, I'm trying to using Botkit's embed code in a component, but it's just stuck in "Disconnected...reconnecting":

Code Sandbox is here

(I've removed the OnClick header and embedded_messenger divs as I want it to launch full-sized)

<div>
    <iframe
      title="botkit"
      id="botkit_client"
      src="//arrow-tarn.glitch.me/chat.html"
      style={{ height: "80vh", width: "100%" }}
    />

    <script src="//arrow-tarn.glitch.me/embed.js" />
    <link rel="stylesheet" href="//arrow-tarn.glitch.me/css/embed.css" />

    <script>var options = {}; Botkit.boot(options);</script>
</div>
);

When I run the app, I also get the following console error in Chrome:

GET http://arrow-tarn.glitch.me/%7B%7B%7Burl%7D%7D%7D 404 (Not Found)

Which of course translates unescaped to {{url}} not found.

I'm thinking it has to do with the initialization/options in React:

<script>var options = {}; Botkit.boot(options);</script>

Any clue what am I doing wrong?

The {{url}} problem is your browser parsing the template and rendering the (hidden) image tag. This isn't the issue causing it to fail.

Something about your iframe is causing the chat client to fail when connecting to the server... did you make any changes to the off the shelf code?