React：具有客戶端渲染的多個頁面

Question

我正在制作一個只有兩頁的 React 網站。 這兩個頁面都只包含動態內容，讓它們與 Gatsby 一起工作是我過去幾天的噩夢，因為生成站點所需的大部分狀態都存儲在客戶端上。 這就是我想回到純客戶端渲染的原因。

我曾經使用create-react-app （這很棒，但后來出現了第二頁）但那是針對 SPA 的，而react-router對我不起作用，因為我是通過 GH 頁面發布的。 （我在 URL 哈希中存儲了很多當前頁面信息，因此哈希路由不是我想要處理的。）

我可以使用哪些框架來生成 2 個.html頁面？

理想情況下，它會像 Gatsby 一樣工作，因為它有一個pages文件夾，用於生成准備好客戶端呈現的空白.html頁面。

---

注意：我對 React Native 不感興趣。 我有一個基於 React 的簡單網站，而不是應用程序。

Answer 1

這是我解決它的方法。

你可以通過一個小技巧來使用 Gatsby。

訣竅是靈感來自此。 我做了一個小函數，它只在客戶端有條件地呈現給定的組件。

import React from "react";

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

該函數是這樣使用的：

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/>
        </>
    );
}

這種方法的主要優點是客戶端組件是靜態導入的，因此 Gatsby 可以將它們與其他組件捆綁在一起。

主要的缺點是瀏覽器變量（例如window 、 location等）的靜態使用是不可能的。 您可以在僅在瀏覽器上執行的函數內部使用它們，但函數外部的變量將不起作用。
可以通過使用延遲初始化（例如使用類靜態get屬性）或保護（例如var foo = typeof window === "undefined" ? undefined : location.host; ）來解決此問題。

在我的例子中，我只有一個使用window靜態變量，這很容易用一個守衛解決。

我希望這可以幫助任何有類似問題的人。