通过检测浏览器 URL 值在 NextJS 中构建可选布局
Build optionally layouts in NextJS by detecting the browser URL value
我会尝试在 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
我的主机returns我不出所料：
Warning: Text content did not match. Server:
所以...我想知道是否必须在自定义 NextJS 服务器上进行一些自定义设置才能授予 backend/frontend 行为？
或者该地区可能有更便宜的解决方案？
任何提示都很好，
谢谢
您无法删除该警告，它的出现是因为您只是从客户端渲染该布局，因此服务器渲染的布局与客户端渲染的布局之间存在差异。
我不知道exenv.canUseDOM是什么变量，但是你可以用process.browser检测当前进程是否是服务端渲染。
我会尝试在 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
我的主机returns我不出所料：
Warning: Text content did not match. Server:
所以...我想知道是否必须在自定义 NextJS 服务器上进行一些自定义设置才能授予 backend/frontend 行为？
或者该地区可能有更便宜的解决方案？
任何提示都很好，
谢谢
您无法删除该警告，它的出现是因为您只是从客户端渲染该布局，因此服务器渲染的布局与客户端渲染的布局之间存在差异。
我不知道exenv.canUseDOM是什么变量，但是你可以用process.browser检测当前进程是否是服务端渲染。