index & app Js
user_6748108161
javascript
a year ago
2.1 kB
1
Indexable
Never
/* 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;