强制 Gatsby 预取链接页面

Question

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

更多上下文：我已经在应用程序中的每个链接中使用 Gatsby Link 组件，如果需要以编程方式更改路由，我正在使用 Gatsby navigate 函数。我尝试在location.state 中存储状态，但如果页面未预取，这也会被擦除。

有什么方法可以强制 Gatsby 预取路由，这样我就不会丢失我的应用状态？

更新：

从我的gatsby-ssr.js 添加代码 sn-p 以防万一：

// 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 组件。