Javascript React：具有客户端呈现的多个页面

我正在制作一个只有两个页面的React网站。这两个页面都只包含动态内容，让它们与盖茨比一起工作是我过去几天的噩梦，因为生成站点所需的大部分状态都存储在客户端上。这就是为什么我想回到纯客户端渲染

我曾经使用

createreact应用程序

（这很好，但后来出现了第二页），但这是针对SPA的，

react路由器

对我不起作用，因为我通过GH页面发布。（我在URL散列中存储了很多当前页面信息，因此我不想处理散列路由。）

我可以使用哪些框架来生成我2

.html

页面

理想情况下，它将像加茨比那样工作，它有一个<代码>页< /Cord>文件夹，用于生成空白<代码> .html < /COD>页，已准备好用于客户端渲染。

---

---

注：我对React Native不感兴趣。我有一个基于React的简单网站，而不是一个应用程序。

以下是我解决这个问题的方法

你可以用一个小把戏来使用盖茨比

这个把戏的灵感来自。我制作了一个小函数，只在客户端有条件地呈现给定的组件

import React from "react";

export default function clientOnly(supplier: () => JSX.Element): JSX.Element {
    const isSSR = typeof window === "undefined";
    if (isSSR) {
        return <></>;
    } else {
        return supplier();
    }
}

从“React”导入React；
仅导出默认函数clientOnly（供应商：（）=>JSX.Element）：JSX.Element{
常量isSSR=窗口类型==“未定义”；
国际单项体育联合会（isSSR）{
返回；
}否则{
退货供应商（）；
}
}

该函数的使用方式如下：

import React from "react";
import clientOnly from "../client-only";
import ClientSideComponent from "../client-side-component";
import OtherStuff from "../other-stuff";

export default function HomePage(): JSX.Element {
    return (
        <>
            {clientOnly(() => (
                <ClientSideComponent />
            ))}
            <OtherStuff/>
        </>
    );
}

从“React”导入React；
仅从“./仅客户端”导入客户端；
从“./客户端组件”导入客户端组件；
从“./其他材料”导入其他材料；
导出默认函数HomePage（）：JSX.Element{
返回(
{clientOnly（（）=>(
))}
);
}

这种方法的主要优点是客户端组件是静态导入的，因此盖茨比可以将它们与其他组件捆绑在一起

主要缺点是静态使用浏览器变量（例如，

窗口

，

位置

，…）是不可能的。您可以在仅在浏览器上执行的函数内使用它们，但函数外的变量将不起作用
可以通过使用惰性初始化（例如使用类static

get

属性）或保护（例如

var foo=typeof window==“undefined”？undefined:location.host；

）来解决此问题

在我的例子中，我只有一个使用

window

的静态变量，这很容易用一个保护来解决

---

我希望这对任何有类似问题的人都有帮助。

你有没有研究过

NextJS

？我有。它可以进行SSR甚至静态站点生成，但不能进行纯客户端渲染。