index & app Js

/* eslint-disable jsx-a11y/anchor-is-valid */
// Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Detail from "./components/Detail";
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Example />}></Route>
          <Route path="/pokemon/:id" element={<Detail />}></Route>
        </Routes>
      </BrowserRouter>
    </QueryClientProvider>
  );
}
function Example() {
  const { isLoading, error, data } = useQuery(["repoData"], () =>
    fetch("https://pokeapi.co/api/v2/pokemon/${id}").then((r) => r.json())
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;
  console.log(data);

  return (
    <div>
      <h3>Use React Query</h3>

      {data.results.map((value, key) => (
        <div>
          {" "}
          <ul>
            <li key={key}>
              <Link to={"pokemon/:id"}>{value.name}</Link>
            </li>
          </ul>
        </div>
      ))}

      <hr />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<App />);

//Detail.js
//##
/* eslint-disable jsx-a11y/anchor-is-valid */

import React from "react";
import { useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";

function Detail() {
  const { id } = useParams();
  const { isLoading, error, data } = useQuery(["repoData"], () =>
    fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((r) => r.json())
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;
  console.log(data);

  return (
    <div>
      <h3>Use React Query to Detail</h3>
      <h3>{}</h3>
      <hr />
    </div>
  );
}
export default Detail;