如何在静态 next.js 站点上 return window.location.host？

Question

我想 return {window.location.host} 在静态 next.js 网站上

我设法记录了该值，但我不知道如何return它。

import React from "react";
import { useEffect } from "react";

export default function Test() {
  useEffect(() => {
    console.log(window.location.host);
  }, []);

  return <h1>{window.location.host}</h1>;
}

我是一个 JS 初学者，我所做的只是return它在初始页面加载时使用 useEffect 一次，但在重新加载后它给出了错误

ReferenceError: window is not defined

Answer 1

window在服务器端渲染时不可用，您可以在您的效果挂钩客户端更新状态挂钩。

import {useEffect, useState} from "react";

export default function TestPage() {
  const [host, setHost] = useState("");
  useEffect(() => {
    if (typeof window !== "undefined") setHost(window.location.host);
  }, []);
  return <h1>{host}</h1>;
}

如何在静态 next.js 站点上 return window.location.host？

How to return window.location.host on a static next.js site?

next.js

react-hooks