app.jsx

import { useQuery } from "react-query";
import { Route, Routes } from "react-router-dom";
import { Link, PrefetchRouter, useIsPrefetch } from "react-prefetching";

export default function App() {
  return (
    <PrefetchRouter> // <- 1. replace BrowserRouter
      <Routes>
        <Link to="/a">A</Link> // <- 2. use Link from prefetch
        <Route path="a" element={<A />} />
      </Routes>
    </PrefetchRouter>
  );
}

function A() {
  const { isLoading, data } = useQuery("A", () => fetchA());
  if (useIsPrefetch()) return <B />; // <- 3. return Child if isPrefetch
  
  if (isLoading) return <p>Loading</p>;
  return <div> {data} <B /> </div>;
}

function B() {
  const { isLoading, data } = useQuery("B", () => fetchB());
  if (useIsPrefetch()) return <C />; // <- 3. return Child if isPrefetch

  if (isLoading) return <p>Loading</p>;
  return <div> {data} <C /> </div>;
}

function C() {
  const { isLoading, data } = useQuery("C", () => fetchC());
  if (isLoading) return <p>Loading</p>;
  return <div>{data}</div>;
}