Reactjs Gatsby中基于屏幕大小的切换布局

我正在使用Gatsby构建一个web应用程序，需要在移动浏览器中加载使用移动ui库构建的单独布局，并在桌面浏览器中打开时加载另一个ui库的不同布局

我应该如何在根（应用程序）组件级别实现这一点

---

谢谢

我认为您可以尝试，根据浏览器高度返回不同的布局：

const React = require("react")
const Layout = ...
const MobileLayout = ...

exports.wrapPageElement = ({ element, props }) => {

   // a made up hook to detect browser size, implement your own
   const isMobile = useDetectMobile()

  return (
    isMobile 
      ? <MobileLayout {...props}>{element}</MobileLayout> 
      : <Layout {...props}>{element}</Layout>

  )
}

const React=require（“React”）
常量布局=。。。
const MobileLayout=。。。
exports.wrapPageElement=（{element，props}）=>{
//一个用来检测浏览器大小的钩子，实现你自己的
const isMobile=useDetectMobile（）
返回(
伊斯莫比尔
？{element}
：{element}
)
}

但这会很棘手，因为在服务器端生成过程中，您需要一个默认布局，这可能（或可能不？）导致错误行为？我不确定

---

一个安全的方法是为你的应用程序生成一个移动版本和一个桌面版本，然后在

gatsby browser

中检测浏览器大小/类型并相应重定向。

是的，我认为你是对的。在处理SSR时，一开始需要有默认布局，这使得事情变得复杂。最好预先生成布局并重定向到浏览器大小检测。非常感谢！对于将此解决方案应用于不同布局的任何人，只需确保分别使用

import

和

const export wrapPageElement

而不是

require

和

exports.wrapPageElement

即可使其正常工作。如何检测浏览器大小并重定向它？