404 page on api/detail/btcusdt example

The pair variable doesn't exist on router.query

try to do something like this

const query = router.query;

and then access the pair variable using

query.pair

in your jsx

not works 😦

ReferenceError: query is not defined

Source
app[api][...detail]\page.jsx (13:18) @ query

11 |
12 | // router.query'den pair değişkenini ancak router hazır olduğunda çek

13 | const pair = query.pair;

"use client"
import React from 'react';
import { useRouter } from 'next/navigation';
import useSWR from 'swr';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const fetcher = url => axios.get(url).then(res => res.data);

export default function Detail() {
const { detail } = useParams();

const pair = detail?.[1];

console.log(pair);


// API'den veri çekmek için SWR kullanın, ancak sadece 'pair' mevcut olduğunda
const { data, error } = useSWR(
pair ? https://backend.ultralifebiyorans.com/SwapCatch/home/trades/${pair} : null,
fetcher
);


if (error) return <div>Veri yüklenirken hata oluştu.</div>;
if (!data) return <div>Veri yükleniyor...</div>;

// Veriyi sayfada göster
return (
<div>
<h1>{pair} Detayları</h1>
<ul>
{data.map((item, index) => (
<li key={index}>
<strong>Tarih:</strong> {new Date(item.trade_date).toLocaleString()}
<br />
<strong>Token:</strong> {item.pair}
<br />
<strong>Miktar $:</strong> {item.usd_value.toFixed(2)}
<br />
<strong>Balina Token Miktarı:</strong> {item.quantity}
<br />
<strong>Sinyal:</strong> {item.trade_type}
<br />
<strong>Trader UID:</strong> {item.trader_id}
</li>
))}
</ul>
</div>
);
}
my file