React Router刷新页面时状态丢失如何实现数据持久化

• 你把全量反馈数据的拉取逻辑写死在Homepage组件的useEffect里了，直接刷新/feedbacks/:id详情页路由时，Homepage组件根本不会挂载，这段拉数据的代码完全不执行，Context初始化的feedbacks是空数组，当然找不到对应id的反馈内容。
• 之前试localStorage没生效，是因为没做全链路的缓存逻辑：要么只存没读，要么更新数据的时候不同步缓存，单步操作肯定达不到持久化效果。

第一步：把全局数据拉取逻辑移到Context层，保证所有路由下都能触发数据请求 #

不要把拉取feedbacks的逻辑绑定在某个页面组件上，直接放到FeedbackProvider里，只要Provider挂载（整个应用启动就会挂载，和当前路由无关）就会自动拉取数据，修改FeedbackContext.js代码如下：

import { createContext, useState, useEffect } from "react";
import feedbackService from "../services/feedback"; // 替换成你项目中实际的feedbackService引入路径

const FeedbackContext = createContext();

export const FeedbackProvider = ({ children }) => {
  // 初始化时优先读取localStorage缓存，避免刷新瞬间白屏
  const [feedbacks, setFeedbacks] = useState(() => {
    const saved = window.localStorage.getItem("cachedFeedbacks");
    return saved ? JSON.parse(saved) : [];
  });

  // Provider挂载时就拉取全量反馈数据，不依赖任何页面组件
  useEffect(() => {
    feedbackService.getAll().then((initialFeedbacks) => {
      const sortedFeedbacks = initialFeedbacks.sort((a, b) => b.upvotes - a.upvotes);
      setFeedbacks(sortedFeedbacks);
      // 拉到最新数据后同步写入localStorage做持久化缓存
      window.localStorage.setItem("cachedFeedbacks", JSON.stringify(sortedFeedbacks));
    });
  }, []);

  // 封装统一的更新方法，所有修改feedbacks的操作都走这个方法，自动同步缓存
  const updateFeedbacks = (newFeedbacks) => {
    const value = typeof newFeedbacks === 'function' ? newFeedbacks(feedbacks) : newFeedbacks;
    setFeedbacks(value);
    window.localStorage.setItem("cachedFeedbacks", JSON.stringify(value));
  };

  return (
    <FeedbackContext.Provider value={{ feedbacks, setFeedbacks: updateFeedbacks }}>
      {children}
    </FeedbackContext.Provider>
  );
};

export default FeedbackContext;

第二步：给详情页加兜底逻辑和加载状态，避免异步加载时空指针报错 #

数据拉取是异步的，页面刚加载的瞬间feedbacks可能还是空的，直接访问feedback.comments会触发js错误，修改FeedbackDetailView.js：

import { useParams, Link } from "react-router-dom";
import { useContext, useEffect, useState } from "react";

import ButtonTertiary from "../Elements/Buttons/ButtonTertiary";
import FeedbackDetail from "../FeedbackView/FeedbackDetail";
import FeedbackDetailComment from "./FeedbackDetailComment";

import FeedbackContext from "../../contexts/FeedbackContext";
import feedbackService from "../../services/feedback"; // 替换成你项目中实际的feedbackService引入路径

const FeedbackDetailView = () => {
  const { feedbacks, setFeedbacks } = useContext(FeedbackContext);
  const id = useParams().id.slice(0, -1);
  const [loading, setLoading] = useState(feedbacks.length === 0);

  // 兜底：如果全局feedbacks里没找到当前反馈（比如用户直接点分享的详情页链接进来），单独拉取当前id的反馈数据
  useEffect(() => {
    const feedbackExist = feedbacks.some(item => item.id === id);
    if (feedbacks.length > 0) {
      setLoading(false);
      return;
    }
    if (!feedbackExist && feedbackService.getById) {
      setLoading(true);
      feedbackService.getById(id).then(res => {
        // 把单条拉到的反馈合并到全局feedbacks里
        setFeedbacks(prev => [...prev, res]);
        setLoading(false);
      }).catch(() => {
        setLoading(false);
      });
    }
  }, [id, feedbacks, setFeedbacks]);

  const feedback = feedbacks.find((feedback) => feedback.id === id);

  // 加载中或者没找到数据的兜底展示
  if (loading || !feedback) {
    return (
      <div className="p-6 sm:mx-28 md:max-w-xl md:mx-auto mt-8">
        <Link to="/">
          <ButtonTertiary buttonText="Go Back" />
        </Link>
        <div className="p-6 bg-white rounded-lg mt-14 text-center">
          {loading ? "Loading feedback..." : "Feedback not found"}
        </div>
      </div>
    )
  }

  return (
    <div className="p-6 sm:mx-28 md:max-w-xl md:mx-auto">
      <div className="mt-8">
        <Link to="/">
          <ButtonTertiary buttonText="Go Back" />
        </Link>
      </div>

      <FeedbackDetail feedback={feedback} />

      <div className="p-6 bg-white rounded-lg mt-14 md:mx-auto">
        <h1 className="text-lg font-bold text-navy-primary">
          {feedback.comments.length}{" "}
          {feedback.comments.length === 1 ? "Comment" : "Comments"}
        </h1>

        {feedback.comments.length !== 0 ? (
          <div className="mt-2 border-grey-50">
            {feedback.comments.map((comment, index) => (
              <FeedbackDetailComment key={index} comment={comment} />
            ))}
          </div>
        ) : (
          ""
        )}
      </div>

      <div className="p-6 bg-white rounded-lg mt-14 md:mx-auto">
        <h1 className="text-lg font-bold text-navy-primary">Add a comment</h1>
        <p className="text-sm font-light text-navy-tertiary">
          Max 250 characters.
        </p>
        <textarea className="mt-4 bg-main-secondary text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full h-24 p-2.5"></textarea>
        <div className="flex w-full justify-items-end">
          <button
            type="submit"
            className="px-6 py-3 mt-4 ml-auto text-sm font-semibold leading-5 text-center text-white rounded-lg cursor-pointer text-b bg-fuchsia-600 hover:bg-fuchsia-400"
          >
            Add Comment
          </button>
        </div>
      </div>
    </div>
  );
};

export default FeedbackDetailView;

如果你的后端没有提供单条反馈的查询接口，可以删掉FeedbackDetailView里单独拉取单条数据的useEffect，只要保留loading判断，等Context拉完所有feedbacks再渲染内容即可，不会影响正常使用。

第三步：清理Homepage里冗余的拉取逻辑 #

现在数据拉取已经移到Context里统一处理了，把Homepage.js里原来重复拉取feedbacks的useEffect删掉，避免重复发起接口请求：

// 删掉这段冗余代码即可
useEffect(() => {
  feedbackService.getAll().then((initialFeedbacks) => {
    setFeedbacks(initialFeedbacks.sort((a, b) => b.upvotes - a.upvotes));
  });
}, []);

• 不管是从首页跳转到详情页，还是直接刷新详情页，应用启动后就会自动拉取全量反馈数据，不会再出现Context为空的问题
• localStorage会自动缓存最新的反馈数据，刷新页面时会先读缓存渲染，不会出现长时间白屏
• 就算全量列表接口加载慢，详情页也会优先拉取单条反馈数据做兜底，不会出现找不到数据的报错
• 后续所有对feedbacks的修改（新增、点赞、加评论）只要调用setFeedbacks方法，都会自动同步到localStorage，持久化自动生效。

内容的提问来源于stack exchange，提问作者Dinie Zikry