diff --git a/components/WalineComponent.js b/components/WalineComponent.js index a8ccb3ac..a47999c7 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -4,31 +4,33 @@ import BLOG from '@/blog.config' import { useRouter } from 'next/router' const path = '' - +let waline = null /** * @see https://waline.js.org/guide/get-started.html * @param {*} props * @returns */ const WalineComponent = (props) => { - const walineInstanceRef = React.useRef(null) const containerRef = React.createRef() const router = useRouter() const updateWaline = url => { if (url !== path) { - walineInstanceRef.current?.update(props) + waline.update(props) } } React.useEffect(() => { - walineInstanceRef.current = init({ - ...props, - el: containerRef.current, - serverURL: BLOG.COMMENT_WALINE_SERVER_URL - }) - router.events.on('routeChangeComplete', updateWaline) + if (!waline) { + waline = init({ + ...props, + el: containerRef.current, + serverURL: BLOG.COMMENT_WALINE_SERVER_URL + }) + } + // 跳转评论 + router.events.on('routeChangeComplete', updateWaline) const anchor = window.location.hash if (anchor) { // 选择需要观察变动的节点 @@ -58,7 +60,8 @@ const WalineComponent = (props) => { } return () => { - walineInstanceRef.current?.destroy() + waline.destroy() + waline = null router.events.off('routeChangeComplete', updateWaline) } }, [])