Question

在我的应用中，我将状态存储在全局对象中（类似于Redux，但不是Redux）。当用户在网站上浏览时，我希望此状态持续存在。 Gatsby聪明地尝试为页面上找到的链接预取页面内容，但是有时导航到特定路线时，会从服务器获取页面，窗口会重新加载，并且我会丢失状态。

更多信息：我已经为应用程序中的每个链接使用了Gatsby Link组件，并且如果需要以编程方式更改路线，我正在使用Gatsby navigate函数。我曾尝试将状态存储在location.state中，但是如果未预取页面，也会擦除状态。

有什么方法可以强制Gatsby预取路由，以免丢失应用状态？

更新：

从我的gatsby-ssr.js添加代码段，以防可能相关：

// gatsby-ssr.js

import React from "react";
import wrapWithState from "@state/wrapWithState"; <-- this is a React context provider

import { SearchConfig } from "@modules/search/index";
import { DefaultLayout, HeaderWrap, Lang } from "@layout";

export const wrapRootElement = wrapWithState;

export const wrapPageElement = ({ element, props }) => {
  const { location } = props;

  return (
    <>
      <Lang currentPath={location.href} />
      <SearchConfig />
      <HeaderWrap currentPath={location.href} />
      <DefaultLayout {...props}>{element}</DefaultLayout>
    </>
  );
};

Answer 1

真的很简单。如果未使用Link组件生成链接，则其行为将与常规锚一样，并且浏览器将执行页面加载（重置状态）。首先确定哪些链接的行为类似于常规链接，然后查看为什么不使用Link组件。

强制盖茨比预取链接的页面

1 个答案: