时间戳

首页 > 解决方案 > 强制 Gatsby 预取链接页面

state - 强制 Gatsby 预取链接页面

问题描述

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

更多上下文：我已经Link为应用程序中的每个链接使用了 Gatsby 组件，如果需要以编程方式更改路由，我正在使用 Gatsbynavigate函数。我尝试将状态存储在 中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>
    </>
  );
};

标签： stategatsbyprefetchlink-prefetch

解决方案

真的很简单。如果链接不是使用Link组件生成的，它的行为就像一个普通的锚点，浏览器将执行页面加载（重置你的状态）。首先确定哪些链接的行为类似于常规链接，并查看为什么Link不在那里使用组件。

推荐阅读