admin管理员组文章数量:1323505
I am using a tawk.io chat on my reactjs app:- This is content of my index.js file:-
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" ponent={BookRead} />
<Route ponent={App} />
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
App.js ponent file content :-
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 = ";;
s1.charset = "UTF-8";
s1.setAttribute("crossorigin", "*");
s0.parentNode.insertBefore(s1, s0);
})();
}, []);
return (
<div className="content">
<div className="container">
<Route exact path="/" ponent={Home} />
<Route path="/contact-us" ponent={() => <Contact user={user} />} />
)}
/>
<Route path="/account" ponent={Account} />
</div>
</div>
);
}
export default App;
How can i show the chat widget in all ponents inside the App.js route and hide/remove it from the route <Route exact path="/view/:id/:section/:part" ponent={BookRead} />
?
I am using a tawk.io chat on my reactjs app:- This is content of my index.js file:-
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" ponent={BookRead} />
<Route ponent={App} />
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
App.js ponent file content :-
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="/" ponent={Home} />
<Route path="/contact-us" ponent={() => <Contact user={user} />} />
)}
/>
<Route path="/account" ponent={Account} />
</div>
</div>
);
}
export default App;
How can i show the chat widget in all ponents inside the App.js route and hide/remove it from the route <Route exact path="/view/:id/:section/:part" ponent={BookRead} />
?
2 Answers
Reset to default 8Solved by adding the following to BookRead.js ponent :-
useEffect(() => {
if (window.Tawk_API) {
window.Tawk_API.hideWidget();
}
return () => {
if (window.Tawk_API) {
window.Tawk_API.showWidget();
}
};
}, []);
The API docs at https://developer.tawk.to/jsapi/ suggest you could use Tawk_API.showWidget();
and Tawk_API.hideWidget();
to show and hide the widget.
React-Router provides an useLocation
hook you can use to figure out when the location has changed.
Put those two together and you should be able to get the effect you want.
本文标签: javascriptMaking the chat widget Tawkio disappear on one componentStack Overflow
版权声明:本文标题:javascript - Making the chat widget Tawk.io disappear on one component - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742141895a2422615.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论