时间戳

首页 > 解决方案 > 通过检测浏览器 URL 值在 NextJS 中构建可选布局

reactjs - 通过检测浏览器 URL 值在 NextJS 中构建可选布局

问题描述

我会尝试在 NextJS 中做一些可选的布局。我的问题是我找到了一些方法来检查浏览器 URL，然后根据这些 URL 提供内容。但是通过这种方式，服务器内容和浏览器内容不再相同，因此模式中断。

这是我的试验片段：

export default ({children, title = 'title' }) => {
var 

contact = false;
    if (exenv.canUseDOM ){ if (window.location.href==="http://localhost:4000/contact" ) { contact= true}; } 
else {const contact = false};
    if (contact){ return(  <div>Hey it is contact ! </div> ) } 
else {  // return  normal layout

我的控制台可以预见地返回我：

警告：文本内容不匹配。服务器：

所以...我想知道是否必须在自定义 NextJS 服务器上进行一些自定义设置以授予后端/前端行为？

或者也许该地区有更便宜的解决方案？

任何提示都会很棒，

谢谢

标签： reactjsnext.js

解决方案

您无法删除该警告，因为您只是从客户端渲染该布局，所以服务器渲染的布局和客户端渲染的布局之间存在差异。

我不知道 exenv.canUseDOM 是什么变量，但是您可以使用它process.browser来检测当前进程是否是服务器端渲染。

推荐阅读