我正在开发一个nextJS网站，它使用两种不同的标题来显示不同的屏幕尺寸。
components/Header/index.tsx
const Header : React.FC = () => {
const theme = useTheme() // mui 5 hook
const matchesMD = useMediaQuery(theme.breakpoints.down("md"))
return (
matchesMD ? <HeaderMobile /> : <HeaderDesktop />
)
}我使用材料UI的useMediQuery来显示标题conditonally。但问题是，当我打开我的手机上的headerDesktop的网站是一个呈现在屏幕上最初这是真的搞砸了，因为它不适合小屏幕，然后几秒钟后，HeaderMobile将呈现在屏幕上。我想知道是否有一种方法，不包括HeaderDesktop在捆绑在所有如果屏幕大小小于900 px？
我认为可能有一个使用动态导入的解决方案，但我不知道如何以及在哪里实现它。
const HeaderDesktop = dynamic(()=>import("./HeaderDesktop"),{ssr:false})
const HeaderMobile = dynamic(()=>import("./HeaderMobile"),{ssr:false})
1条答案
按热度按时间ckocjqey1#
不幸的是，我不知道是否有办法做到这一点，但也不确定这是否是一个好方法。例如，让我们以平板电脑为例，最初您垂直握住它，但随后旋转它以水平握住它。如果没有捆绑的HeaderDesktop，这种交互可能会感觉奇怪。
useMediaQuery有noSsr属性，它可以防止服务器端的第一个“false”返回（当谈到nextjs时）。因此设置useMediaQuery(theme.breakpoints.down("md"), { noSsr: true })应该可以防止最初显示HeaderDesktop。但在我看来，这错过了SSR/SSG的要点。使用
useMediaQuery有一个通用的解决方法，就是实现类似的东西（其中Hidden是一个简单的组件，带有一些css和display：最大宽度/最小宽度无）