Javascript 在单页React应用程序中使用漂移机器人

我用的是漂移机器人， 我正在尝试根据当前路由/url启用/禁用它。我正在使用REACT-ROUTER

我可以使用

drift.unload（）

停止它的运行（在我的

componentWillMount（）

函数中），但无法重新启动它

我们有一些代码是从这里拉出来的，所以一直在工作，除了我们现在需要修改它，以便在特定页面上禁用它

以下是我们当前使用的代码：

let driftbot_function = function() {
      !function() {
        var t;
        if (t = window.driftt = window.drift = window.driftt || [], !t.init) return t.invoked ? void (window.console && console.error && console.error("Drift snippet included twice.")) : (t.invoked = !0,
        t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
        t.factory = function(e) {
          return function() {
            var n;
            return n = Array.prototype.slice.call(arguments), n.unshift(e), t.push(n), t;
          };
        }, t.methods.forEach(function(e) {
          t[e] = t.factory(e);
        }), t.load = function(t) {
          var e, n, o, i;
          e = 3e5, i = Math.ceil(new Date() / e) * e, o = document.createElement("script"),
          o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + i + "/" + t + ".js",
          n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n);
        });
      }();

      drift.SNIPPET_VERSION = '0.3.1';
      drift.load('****__our-key__****');
      drift.page();
    }

    driftbot_function();

这是我们的

app.js

的

componentDidMount（）

，因为它是我们的根

'/'

。我也尝试过在

index.html

中的脚本标记中移动它，但得到了相同的结果

当链接到我想要禁用的应用程序的某个部分时，唯一可以禁用它的方法是

window.drift.unload（）

.hide

和

.off

将不起作用

当回到根目录时，我有一个命令，

window.drift.load（）

，但现在它是一个空函数，在运行

unload（）

函数之前它是工作的

我还尝试将上面链接的漂移文档中的函数包含在我的

root.js

和

app.js

文件中，但没有成功

---

有人有什么想法吗？

我可以为你的案子想出两个选择。首先是创建一个只用于启动/停止漂移机器人的组件。您可以在

componentDidMount

上初始化漂移机器人，然后在

componentWillUnmount

上调用

window.drift.unload（）

。然后，你不再用它包装整个应用程序，而是将它放在主页上，这样当你导航到另一个部分时，它就会被卸载

---

另一个选项，因为您提到了React Router，可以使用

历史记录观看应用程序的
位置。收听
-，或者检查React Router提供的道具-
组件将更新
，然后根据当前url打开和关闭漂移机器人。
所以这是一个非常令人困惑的过程，但我最终在漂移的一些工程师的帮助下找到了答案

首先，在他们的破折号设置中，当你“黑名单”URL时，你只需要包含关键字而不是完整的URL（我的第一个错误）

其次，将函数放入
index.html
文件中的脚本中

第三，找到您希望禁用小部件的所有顶级路由组件，并在其react文章中包含以下代码

componentWillMount() {
  drift.page(this.props.location.pathname)
}
componentWillReceiveProps(nextProps) {
  if (nextProps.location.pathname !== this.props.location.pathname) {
    drift.page(nextProps.location.pathname)
  }
}

这将基本上重新初始化小部件，并根据设置黑名单中的关键字从您提供的url（
This.props.location.pathname
）运行
.includes
检查。然后，它将根据结果禁用或启用它

好了，祝所有被困在这上面的人好运…
漂移。page（）不适合我

我正在为react使用npm包



漂移包含在我的顶级组件中

   <Drift appId='123456789' />
    <Favicon url={this.favicon} />
    <Meta
      meta={this.state.data.metaTags}
    />

你的应用程序如何处理导航？您是否使用React路由器或其他等效设备？对不起，是的。我正在使用react路由器。我完全忘了在我的帖子里写这个。这就是问题的根源。我可以在漂移仪表板的设置选项卡中“黑名单”各种URL，但它只在页面刷新时生效，这显然不适用于任何需要快速修复的人。您可以使用
drift.show（）
和
drift.hide（）
来显示/隐藏消息图标。对于
.unload（）
而言，唯一的问题是调用后无法成功调用
.load（）
。但是，
.load（）
在第一次调用时起作用。所以看起来
.unload（）
实际上完全删除了所有脚本。我不知道哦，我明白了。对不起，我没有意识到这是真正的问题。我对漂移机器人API一无所知。您可能应该询问他们的支持人员如何在SPA中正确停止/启动他们的小部件，但您可以在调用
driftbot_函数（）之前尝试
window.drift=window.drift=window.drift=undefined
您正在导入
漂移
吗？在组件中使用漂移时，漂移是如何定义的？
   componentDidUpdate (prevProps, prevState, snapshot) {

const prevLoc = prevProps.location.pathname
const newLoc = this.props.location.pathname

if (prevLoc !== newLoc) {
 window.drift.reset()