SamwithCode

One Single Dynamic Detailed Page & Route for all 100+ API Cards in React Query 😀

One Single Dynamic Detailed Page & Route for all 100+ API Cards in React Query

Is project mein hum ek single dynamic route aur page banayenge jahan 100+ API cards mein se kisi bhi ek card per click karne par uska detail page dikhega. Hum React Router ka dynamic route aur React Query se API data fetch karenge.

1. Install Dependencies

npm install react-router-dom @tanstack/react-query axios

2. Setup Routes in App.jsx


import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Details from './pages/Details'

function App() {
  return (
    
      
        } />
        } />
      
    
  )
}

export default App

3. Home Page: Show All Cards


// pages/Home.jsx
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
import { Link } from 'react-router-dom'

function Home() {
  const { data, isLoading } = useQuery(['cards'], () =>
    axios.get('https://api.example.com/cards').then(res => res.data)
  )

  if (isLoading) return 
Loading...


  return (
    

      {data.map(card => (
        
          
{card.title}

          
{card.description}

        
      ))}
    

  )
}

export default Home

4. Details Page: Fetch by ID


// pages/Details.jsx
import { useParams } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

function Details() {
  const { id } = useParams()

  const { data, isLoading } = useQuery(['card', id], () =>
    axios.get(`https://api.example.com/cards/${id}`).then(res => res.data)
  )

  if (isLoading) return 
Loading Detail...


  return (
    

      
{data.title}

      
{data.description}

      
More Info: {data.moreInfo}

    

  )
}

export default Details

5. Final Notes

  • Use dynamic route :id to handle any number of cards.
  • React Query fetches and caches data based on query key (like ['card', id]).
  • Make sure each API card has a unique ID.