相关疑难解决方法(0)

在 Web 应用程序上，我想显示两种不同的菜单，一种用于移动设备，一种用于桌面浏览器。我将 Next.js 应用程序与服务器端渲染和库react-device-detect 一起使用。

这是CodeSandox 链接。

import Link from "next/link";
import { BrowserView, MobileView } from "react-device-detect";

export default () => (
  <div>
    Hello World.{" "}
    <Link href="/about">
      <a>About</a>
    </Link>
    <BrowserView>
      <h1> This is rendered only in browser </h1>
    </BrowserView>
    <MobileView>
      <h1> This is rendered only on mobile </h1>
    </MobileView>
  </div>
);

如果您在浏览器中打开它并切换到移动视图并查看控制台，您会收到此错误：

警告：文本内容不匹配。服务器：“仅在浏览器中呈现”客户端：“仅在移动设备上呈现”

发生这种情况是因为服务器的渲染检测到浏览器，而在客户端，他是一个移动设备。我发现的唯一解决方法是生成两者并使用如下 CSS：

.activeOnMobile {
  @media screen and (min-width: 800px) {
    display: none;
  }
}

.activeOnDesktop {
  @media screen …