使聊天小部件 Tawk.io 在一个组件上消失

Question

我在我的 reactjs 应用程序上使用 tawk.io 聊天：- 这是我的 index.js 文件的内容：-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookRead from "./pages/BookRead";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route exact path="/view/:id/:section/:part" component={BookRead} />
        <Route component={App} />
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js 组件文件内容：-

import React, { useEffect, useState } from "react";
import { Route } from "react-router-dom";
import Login from "./pages/Login";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import Home from "./pages/Home";

function App(props) {

  useEffect(() => {
    var Tawk_API = Tawk_API || {},
      Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),
        s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = "https://embed.tawk.to/5a624e/default";
      s1.charset = "UTF-8";
      s1.setAttribute("crossorigin", "*");
      s0.parentNode.insertBefore(s1, s0);
    })();
  }, []);

  return (
    <div className="content">
      <div className="container">
        <Route exact path="/" component={Home} />
        <Route path="/contact-us" component={() => <Contact user={user} />} />
          )}
        />
        <Route path="/account" component={Account} />
      </div>
    </div>
  );
} 
export default App;

如何在 App.js 路由和 hide/remove 路由 <Route exact path="/view/:id/:section/:part" component={BookRead} /> 中的所有组件中显示聊天小部件？

Answer 1

https://developer.tawk.to/jsapi/ 的 API 文档建议您可以使用 Tawk_API.showWidget(); 和 Tawk_API.hideWidget(); 来显示和隐藏小部件。

React-Router 提供了一个 useLocation 挂钩，您可以使用它来确定位置何时发生变化。

把这两个放在一起，应该可以得到你想要的效果。

Answer 2

通过将以下内容添加到 BookRead.js 组件来解决：-

useEffect(() => {
    if (window.Tawk_API) {
      window.Tawk_API.hideWidget();
    }
    return () => {
      if (window.Tawk_API) {
        window.Tawk_API.showWidget();
      }
    };
  }, []);

使聊天小部件 Tawk.io 在一个组件上消失

Making the chat widget Tawk.io disappear on one component

javascript

reactjs

tawk.to