Gatsby Link组件state刷新丢失：开发环境正常，生产环境异常求解决方案

这问题我之前踩过坑，开发模式下顺风顺水，一部署到生产环境刷新就丢数据，完全不用上Redux，给你几个亲测可行的方案：

方案1：URL参数传递（适合小体积数据） #

因为Link的state是存在内存里的，生产环境刷新页面会重置内存，数据自然就没了。换成URL参数的话，数据存在地址栏，刷新也能保留。

实现起来很简单：

• 跳转时把数据序列化后拼到URL：

<Link 
  to={`/photos?photoData=${encodeURIComponent(JSON.stringify(photoData))}`}
> 
  View Photo 
</Link>

• 在/photos页面解析数据：

import { useEffect, useState } from 'react';

const PhotosPage = ({ location }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const rawData = searchParams.get('photoData');
    if (rawData) {
      setData(JSON.parse(decodeURIComponent(rawData)));
    }
  }, [location.search]);

  // 后续使用data即可
  return <div>{/* 页面内容 */}</div>;
};

export default PhotosPage;

⚠️ 注意：URL有长度限制，如果你的photoData体积较大（比如包含base64图片），这个方案就不太合适了。

方案2：localStorage/sessionStorage存储（适合中等体积数据） #

跳转时把数据存在本地存储里，页面刷新后再从本地读取，用完还可以删掉避免残留。

代码示例：

• 跳转组件：

<Link 
  to="/photos"
  onClick={() => {
    // 用sessionStorage的话，关闭标签页就自动清空；localStorage会持久化保存
    sessionStorage.setItem('photoData', JSON.stringify(photoData));
  }}
> 
  View Photo 
</Link>

• /photos页面读取：

import { useEffect, useState } from 'react';

const PhotosPage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const savedData = sessionStorage.getItem('photoData');
    if (savedData) {
      setData(JSON.parse(savedData));
      // 可选：读取后删除，防止下次进入页面读到旧数据
      sessionStorage.removeItem('photoData');
    }
  }, []);

  return <div>{/* 页面内容 */}</div>;
};

export default PhotosPage;

这个方案不受URL长度限制，但要注意不能存函数、Symbol这类无法序列化的数据。

方案3：通过页面参数关联查询数据（最符合Gatsby静态站点理念） #

如果你的photoData是从数据源（比如CMS、本地文件）来的，那完全可以只传递一个唯一标识（比如图片ID），然后在/photos页面通过GraphQL查询获取完整数据。

实现步骤：

• 跳转时只传ID：

<Link to={`/photos/${photoId}`}> View Photo </Link>

• 在/photos页面的page query里根据ID查询：

import { graphql } from 'gatsby';

const PhotosPage = ({ data }) => {
  const photoData = data.photo;
  return <div>{/* 渲染图片内容 */}</div>;
};

export const query = graphql`
  query($photoId: String!) {
    photo(id: { eq: $photoId }) {
      # 这里写你需要的字段
      id
      title
      url
    }
  }
`;

export default PhotosPage;

这个方案最稳定，不管怎么刷新都能从数据源拿到最新数据，完全不用担心丢失问题，也是Gatsby推荐的静态数据处理方式。

为什么开发和生产模式有差异？ #

简单说：Gatsby开发模式是基于Node.js的热重载服务，页面刷新时内存状态会被保留；而生产模式会生成纯静态HTML文件，刷新页面相当于重新加载整个静态资源，内存里的state自然就被清空了。

内容的提问来源于stack exchange，提问作者Derek Jin