reactjs - Ako znova spustiť načítavacie používateľské rozhranie v Next 13 pomocou nového adresára app?
Pracujem s adresárom app v Next 13 na vytvorenie jednoduchej webovej stránky. Trasa k mojej hlavnej stránke je /{username}?year={year}&month={month}. Pri navigácii na stránku hlavná sekcia tejto stránky spustí načítavacie UI z súboru loading.tsx, pretože sa vykonáva API požiadavka. Na stránke mám selektor, ktorý umožňuje používateľovi zmeniť rok a mesiac. Po zmene týchto hodnôt je používateľ presmerovaný na rovnakú stránku, ale s aktualizovanými dátumovými hodnotami: /{username}?year={updatedYear}&month={updatedMonth}. Po navigácii sa načítavacie UI už nezobrazuje.
Moja stránka je serverová súčasť a pozostáva z:
const year = searchParams.year;
const month = searchParams.month;
const userData = await getUserInfo(params.username);
return (
<main>
...
<Suspense fallback={<Loading />}>
<GameList {...{
username: params.username,
year,
month,
}} />
</Suspense>
</main>
);
Môj komponent <GameList /> je tiež serverový komponent a je definovaný takto:
const games = await getUserGames(username, year, month);
return (
<some game data />
);
Skúšal som Link z Next, aby som presmeroval používateľa na stránku s aktualizovanými dotazmi, kde som ho použil takto:
<Link href={`/${username}?year=${year}&month=${month}`}>component</Link>
Tiež som skúšal použiť useRouter z next/navigation s jeho funkciami push a replace:
router.replace(`/${username}?year=${year}&month=${month}`);
Skúšal som všetky rôzne stratégie cachovania pre moje volania fetch, a stále to nič nezmenilo. Ako môžem dosiahnuť, aby sa moja komponenta <GameList /> opäť dostala do stavu Načítavania, keď sa zmení dátum (keď vykoná nový API request na naplnenie novými dátami)?
Vstupný bod na stránku: GitHub repozitár.