Reactjs 在盖茨比的所有页面上扩展背景视频和导航栏

我想让我的背景视频和导航栏分布在我制作的所有页面上，但我也希望它们位于渲染的所有其他组件后面。我知道我需要在gatsby-browser.js中包装根元素，但我一直面临的问题是背景覆盖了所有元素。有办法解决这个问题吗

当前gatsby-browser.js-当前包含所有具有背景的组件

import React from 'react';
import BackGround from "../../src/components/bg"

export const wrapPageElement = ({ element }) => {
  return <BackGround>{element}</BackGround>;
};

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));

/* global __PATH_PREFIX__ */
// Taken from https://github.com/netlify/netlify-identity-widget
var routes = /(confirmation|invite|recovery|email_change)_token=([^&]+)/;
var errorRoute = /error=access_denied&error_description=403/;
var accessTokenRoute = /access_token=/;

export const onInitialClientRender = function (_, _ref) {
  var _ref$enableIdentityWi = _ref.enableIdentityWidget,
      enableIdentityWidget = _ref$enableIdentityWi === void 0 ? true : _ref$enableIdentityWi,
      _ref$publicPath = _ref.publicPath,
      publicPath = _ref$publicPath === void 0 ? "admin" : _ref$publicPath;
  var hash = (document.location.hash || "").replace(/^#\/?/, "");

  if (enableIdentityWidget && (routes.test(hash) || errorRoute.test(hash) || accessTokenRoute.test(hash))) {
    Promise.resolve().then(function () {
      return (0, _interopRequireWildcard2.default)(require("netlify-identity-widget"));
    }).then(function (_ref2) {
      var netlifyIdentityWidget = _ref2.default;
      netlifyIdentityWidget.on("init", function (user) {
        if (!user) {
          netlifyIdentityWidget.on("login", function () {
            document.location.href = __PATH_PREFIX__ + "/" + publicPath + "/";
          });
        }
      });
      netlifyIdentityWidget.init();
    });
  }
};

从“React”导入React；
从“../../src/components/bg”导入背景
导出常量wrapPageElement=（{element}）=>{
返回{element}；
};
“严格使用”；
var_interopRequireDefault=require（@babel/runtime/helpers/interopRequireDefault”）；
var _interopRequireWildcard2=_interopRequireDefault（require（“@babel/runtime/helpers/interopRequireWildcard”）；
/*全局路径前缀*/
//取自https://github.com/netlify/netlify-identity-widget
var路由=/（确认|邀请|恢复|电子邮件|更改）_令牌=（[^&]+）/；
var errorRoute=/error=access_denied&error_description=403/；
var accessTokenRoute=/access_token=/；
export const onInitialClientRender=函数（u，_ref）{
var\u ref$enableIdentityWi=\u ref.enableIdentityWidget，
enableIdentityWidget=\u ref$enableIdentityWi===void 0？true:\u ref$enableIdentityWi，
_ref$publicPath=\u ref.publicPath，
publicPath=\u ref$publicPath==void 0？“管理员”：\u ref$publicPath；
var hash=（document.location.hash | | |“”）.replace（/^#\/？/，“”）；
if（enableIdentityWidget&（routes.test（hash）| | errorRoute.test（hash）| | accessTokenRoute.test（hash）））{
Promise.resolve（）.then（函数（）{
返回（0，_interopRequireWildcard2.default）（require（“netlify标识小部件”）；
}).然后（函数（_ref2）{
var netlifyIdentityWidget=\u ref2.default；
netlifyIdentityWidget.on（“init”，函数（用户）{
如果（！用户）{
netlifyIdentityWidget.on（“登录”，函数（）{
document.location.href=\uuuuu路径\前缀\uuuuu+“/”+公共路径+“/”；
});
}
});
netlifyIdentityWidget.init（）；
});
}
};

如果需要任何其他信息，请告诉我。

我认为任何API都不符合您的要求，因为它们会将您的整个页面包装在提供的组件中，而这正是您试图避免的。当然，它们会阻止您卸载组件，但是，这将由

@reach/routing

通过以下方法自动处理

您试图实现的是一个简单的共享组件，它跨越从

扩展而来的所有页面：

const布局=（{children}）=>{
返回
{儿童}
;
};

---

类似这样的操作将在所有站点中使用您的背景组件包装您的

，避免包装整个元素。

您可以添加一个工作沙盒吗？如果没有一个，调试代码是很困难的。不要担心第6行以下的netlify cms代码

const Layout = ({ children }) => {
  return <section>
    <BackGround>
       <YourNavigationComponent />
    </BackGround>
    <main>{children}</main>
  </section>;
};