时间戳

首页 > 解决方案 > Gatsby 中的 useLocation 钩子和服务器端渲染错误

reactjs - Gatsby 中的 useLocation 钩子和服务器端渲染错误

问题描述

在我的一个页面中，我想page从路径中获取数字参数并使用useLocation从@reach/router.

import { useLocation } from '@reach/router';

路径如下所示：

http://localhost:4000/joboffers/?page=7

我从路径中获取页码，如下所示：

const pageParam = Number(useLocation().search?.split('=')[1]);

好吧，如果我console.log是pageParam变量，在浏览器的控制台中我会得到正确的页码，但是如果我在 Visual Studio Code 中检查终端，相同变量的值是NaN并且 Gatsby 会抛出以下错误：

Gatsby 中的 React 组件必须在浏览器和 Node.js 环境中成功呈现。当我们尝试在 Node.js 中呈现您的页面组件时，它出错了。

有谁知道为什么会这样？如果我跳过 SSR，一切正常！

标签： reactjsgatsbyserver-side-rendering

解决方案

好吧，你完全发现了这个问题。在 SSR（服务器端渲染）和其他全局window对象尚未定义（出于显而易见的原因，您在服务器中，而不是在客户端中），因此对该变量的任何引用都将失败。

解决方案（许多可能性之一）很简单：

let pageParam;
if (typeof window !== "undefined") {
  pageParam = Number(useLocation().search?.split('=')[1]);
} else {
   pageParam = 0;
}

这只发生在gatsby build因为gatsby develop命令直接在客户端运行项目期间（总结了很多）。

推荐阅读