Question

我想在/ embed /页面上禁用聊天小部件。该小部件已加载到_document.js中。我很熟悉useRoute或withRouter来禁用组件。例子

import React, { Component } from "react";
import Link from "next/link";
import { withRouter } from "next/router";

class Footer extends Component {
  render() {
    const pathname = this.props.router.pathname;

    if (pathname.startsWith("/embed/")) {
      return null;
    } else {
      return (
        <div className='footer container'>
           My footer displayed on all pages expect on /embed/
          </div>
      );
    }
  }
}

export default withRouter(Footer);

但是不幸的是，这在_document.js中不起作用，并且不断出现内部错误500。

import Document, { Head, Main, NextScript } from "next/document";
import { GA_TRACKING_ID } from "../lib/gtag";
import WidgetChat from "../lib/WidgetChat";
import { withRouter } from "next/router";

class MyDocument extends Document {
  render() {
    const pathname = this.props.router.pathname;

    if (pathname.startsWith("/embed/")) {
      return null;
    } else {
      return (
        <html>
          <Head>
            {/* Global Site Tag (gtag.js) - Google Analytics */}
            <script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            />
            <script
              dangerouslySetInnerHTML={{
                __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
              }}
            />
          </Head>
          <body>
            <Main />
            <NextScript />
            <WidgetChat />
          </body>
        </html>
      );
    }
  }
}

export default withRouter(MyDocument);

有什么建议吗？

非常感谢

弗里多

如何在NEXT JS中基于路径名禁用脚本

0 个答案: