How to make react router Link load page like anchor tag?
Question
on one of my components I have an external widget which requires a script tag and a special div element. Once the page loads the script inserts an iframe inside the div.
The issue I am having is that the widget only works when the page is loaded like a normal http page. This widget works when I use anchor tags however with Link it doesn't as there is no page load.
List component ----Link----> Property component
How can I achieve the same behavior but with Link?
App.js
<Switch>
<Route path="/" exact component={Home} />
<Route path="/list" exact component={List} />
<Route path="/property/:id/:sleeps/:start/:end" exact component={Property} />
<Route component={Error} />
</Switch>
List.js
<Link to={`/property/${property.id}/${property.sleeps}/${property.start}/${property.end}`}>
<img src={property.image} alt={property.name}/>
</Link>
Property.js
componentDidMount = () => {
//function inserts script to body
this.loadScript('https://widgetSite.co.uk/components/embed.js');
}
//inside render
<div
data-calendar-key="widget key"
data-calendar-property-id={this.propID}
id="calendar-js">
Your widget will appear here.
</div>
2 answers
solution1
1 2019-09-11 16:50:04
Here is a basic example of React Portals.
Index.html
<body>
<div id="root"></div>
<div id="my-widget"></div>
</body>
MyWidget Component
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const Widget = document.getElementById('my-widget');
class MyWidget extends Component {
state = { openWidget: false };
//functions to open close widget
render() {
return ReactDOM.createPortal(this.renderWidget(), Widget);
}
renderWidget() { /*add your widget elements*/ }
}
export default MyWidget;
You can now use the MyWidget component. Hope this helps. Thanks!
solution2
-1 2019-09-12 13:34:48
Try to implement something like this How to force a script reload and re-execute? in your loadScript function so your script will be force to re-load, re-execute and grab the right data-* every time componentDidMount is trigger. I hope this help
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.