如何使反应路由器链接加载页面像锚标签？答案

【问题标题】：How to make react router Link load page like anchor tag?如何使反应路由器链接加载页面像锚标签？
【发布时间】：2019-09-11 16:00:12
【问题描述】：

在我的一个组件上，我有一个外部小部件，它需要一个脚本标签和一个特殊的 div 元素。页面加载后，脚本会在 div 中插入 iframe。

我遇到的问题是该小部件仅在页面像普通 http 页面一样加载时才起作用。当我使用锚标签时，这个小部件可以工作，但是使用 Link 时它不会因为没有页面加载。

列表组件----Link---->属性组件

如何使用 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>

【问题讨论】：

你尝试过 React 门户吗？您可以使用门户呈现 DOM 层次结构之外的子级。
@Ray 不，我没听说过，现在看看

标签： javascript reactjs react-router

【解决方案1】：

这是一个 React Portal 的基本示例。

Index.html

<body>
  <div id="root"></div>
  <div id="my-widget"></div>
</body>

MyWidget 组件

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;

您现在可以使用 MyWidget 组件。希望这可以帮助。谢谢！

【讨论】：

谢谢雷，但我调查了它，不幸的是，我认为这不能解决它。我的问题是，当使用 Link 移动到属性页面时，小部件脚本没有发送它的 GET 请求。

【解决方案2】：

尝试在您的 loadScript 函数中实现类似 How to force a script reload and re-execute? 的东西，这样您的脚本将在每次触发 componentDidMount 时强制重新加载、重新执行并获取正确的数据-*。我希望这会有所帮助

【讨论】：