Javascript Reaction路由v6.4+数据API：重试加载程序而不显示错误

你可以编写你的fetchDashboard加载器函数来关闭重试"状态".实施可能类似于以下内容:

const fetchDashboard = () => {
  let cache = {};
  let retry = 0;

  return async () => {
    try {
      const result = await axios.get('dashboard');

      // Success, cache result and reset retry state
      cache = result;
      retry = 0;

      return result;
    } catch (error) {
      // Failure/error, increment retry count
      retry++;

      if (retry > 5) {
        // Rethrow error if ran out of retries
        throw error;
      } else {
        // Otherwise return cached result
        return cache;
      }
    }
  };
};

const routes = [
  {
    element: <RootWrapper />,
    errorElement: <ErrorWrapper />,
    children: [
      { path: "/login?", element: <LoginWrapper /> },
      { path: "/logout", element: <Logout /> },
      {
        id: "AuthenticatedRoot",
        element: <AuthenticatedRoot />,
        children: [
          // ...
          { 
            path: "/dashboard",
            element: <Dashboard />,
            errorElement: <Dashboard />, // <-- render as error element too!
            loader: fetchDashboard(),    // <-- invoke outer function
          },
        ]
      }
    ],
  },
];

import {
  useRouteError,
  useLoaderData,
  useNavigate,
  useNavigation
} from "react-router-dom";

const Dashboard = () => {
  const navigate = useNavigate();
  const { state } = useNavigation(); // "idle"/"loading", could be handy

  const data = useLoaderData();
  const error = useRouteError();

  // Effect to trigger route revalidation, 5-minute interval
  useEffect(() => {
    const timer = setInterval(() => {
      navigate(".", { replace: true });
    }, 1000 * 60 * 5);
    return () => clearInterval(timer);
  }, []);

  ...

  return (
    ...
  );
};

演示