How to update the value of component when in SPA page mode?


I create Pagination Component in my project. Link in pagination use component Link from, so it’s make my page SPA.
when I move page from 1 to 2, the data in my component is not updated. It looks the same as on page 1.
I have to refresh or reload to see the results of changes to the component

My code look like this:

// ~/components/base/mainlist.tsx
import Pagination from "~/components/other/pagination";

export default component$(({data, title, style, currentPage}: {data: MainPageData, title: string, style: number, currentPage: number}) => {
//some variable declaration
return (
// some code HTML
<Pagination current={currentPage} max={data.pages.max} slug={slug} />

I also try use useLoaction but no effect at all

{!loc.isNavigating && <Pagination current={currentPage} max={data.pages.max} slug={slug} />}

I use mainlist.tsx in my page

// router/latest-update/index.tsx
export default component$(() => {
    const data = useGetData() // get data from API
    return (
            <div class="max-w-6xl mx-auto relative z-10">
                <div id="content" class="mt-5 relative p-2.5 md:p-14 pt-0 overflow-hidden">
                    <div id="postbody" class="float-left w-full md:w-3/4">
                        <div class="md:pr-5">
                            <Headpage site_name={"Latest Update"} description={`description`} />
                            <Mainlist data={data} title="Table of Contents" style={1} currentPage={data.pages.current} />
                    <Sidebar data={data.sidebar} />

Hi @arachi004, Welcome to the Forum!

To reach out to the Qwik open source project teams, please head over to our Discord and join the discussion there.