Reactjs 仅在Gatsby中的特定页面上加载Snipcart

我在盖茨比使用Snipcart插件，但是脚本到处都被加载。是否有可能使用某种函数仅在一个特定页面上触发脚本，而不是完全触发脚本

下面是我在Gatsby-config.js文件中使用的选项

{
      resolve: "gatsby-plugin-snipcart",
      options: {
        apiKey: process.env.SNIPCART_API,
        autopop: true,
        js: "https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.js",
        styles: "https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.css",
        jquery: false,
      },
    },

你应该看一看。我相信盖茨比插件snipcart已经被弃用了，不能与SnipCartV3一起使用

---

但据我所知，没有办法告诉插件只在特定页面上加载脚本。

您可以直接使用Snipcart，而不使用插件，以对其进行更多控制

假设您有一个

layout.js

文件，包装页面内容，您可以有一个

loadSnipcart

标志，只有在需要时才会加载Snipcart文件

下面是一个例子：

layout.js

从“React”导入React
从“反应头盔”导入头盔
导出默认值（{loadSnipcart，children}）=>{
常量Snipcart=（）=>{
如果（！loadSnipcart）返回null
返回(
)
}
返回(
{儿童}
)
}

shop.js

从“React”导入React
从“/Layout”导入布局
导出默认值（）=>{
返回(
欢迎光临我的店铺！
)
}

index.js

从“React”导入React
从“/Layout”导入布局
导出默认值（）=>{
返回(
此页面不加载Snipcart
)
}

import React from "react"
import Helmet from "react-helmet"

export default ({ loadSnipcart, children }) => {
    const Snipcart = () => {
        if (!loadSnipcart) return null

        return (
            <Helmet>
                <script
                    src="https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.js"
                    type="text/javascript"
                />
                <link
                    href="https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.css"
                    rel="stylesheet"
                />
            </Helmet>
        )
    }

    return (
        <div id="main-content">
            <Snipcart />
            {children}
        </div>
    )
}

import React from "react"
import Layout from "./layout"

export default () => {
    return (
        <Layout loadSnipcart>
            <h1>Welcome to my shop !</h1>
        </Layout>
    )
}

import React from "react"
import Layout from "./layout"

export default () => {
    return (
        <Layout>
            <h1>This page doesn't load Snipcart</h1>
        </Layout>
    )
}