如何在Gatsby中让弹窗在除指定页面外的所有页面显示？

方法一：用useLocation钩子正确获取路径 #

你之前的代码没生效，大概率是因为没有正确在Gatsby中获取location对象——直接用window.location会在SSR（服务器端渲染）阶段报错，而且Gatsby推荐用内置的useLocation钩子来获取路由信息：

1. 导入钩子：

import { useLocation } from '@reach/router';

2. 在布局组件中获取location并判断路径：

const location = useLocation();
const isPrivacyPolicyPage = location.pathname === '/privacy-policy';

3. 保留你的判断逻辑：

if (!showPopup || isPrivacyPolicyPage) {
  return null;
}

如果路径存在末尾斜杠的问题（比如Gatsby生成的路径是/privacy-policy/），可以改用更灵活的判断：

const isPrivacyPolicyPage = location.pathname.replace(/\/$/, '') === '/privacy-policy';

方法二：通过页面props传递隐藏标识（更可靠） #

如果不想依赖路径判断，还可以直接在目标页面给布局组件传参：

1. 在隐私政策页面（src/pages/privacy-policy.js）中，给Layout组件添加hidePopup属性：

export default function PrivacyPolicyPage() {
  return (
    <Layout hidePopup>
      {/* 页面内容 */}
    </Layout>
  );
}

2. 在布局组件中接收并使用这个属性：

export default function Layout({ children, hidePopup = false }) {
  // ...你的弹窗状态逻辑
  if (!showPopup || hidePopup) {
    return null;
  }
  // 渲染弹窗和页面内容
}

这种方法不受路径变化影响，维护性更强。

内容的提问来源于stack exchange，提问作者kacper5123