Loading external script tag in react component - html

Question

I am building a stock picking application. I found this chart template that is really great, it comes with a html script:
<!-- TradingView Widget BEGIN -->
<div id="tv-medium-widget-b3840"></div>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.Widget({
"container_id": "tv-medium-widget-b3840",
"symbols": [
[
"Apple",
"AAPL "
],
[
"Google",
"GOOGL"
],
[
"Yahoo!",
"YHOO"
]
],
"gridLineColor": "#e9e9ea",
"fontColor": "#83888D",
"underLineColor": "#dbeffb",
"trendLineColor": "#4bafe9",
"width": 1000,
"height": 350,
"tradeItWidget": false,
"locale": "en"
});
</script>
<!-- TradingView Widget END -->
My question is how would I put it inside of a react component on a react-router route? I just left the script tags in the html and tried calling the constructor inside of a component but it is being rendered on all pages as canvas instead of the one the router points to.
const TradingViews = React.createClass({
componentDidMount:
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "QUANDL:YAHOO/FUND_FUSEX",
"interval": "M",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
}),
render:function(){
return(
null
)
}
});
export default TradingViews;