app.jsx

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

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Link to="/a">A</Link>
        <Route path="a" element={<A />} />
      </Routes>
    </BrowserRouter>
  );
}

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

function B() {
  const { isLoading, data } = useQuery("B", () => fetchB());
  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>;
}