我有一个Gatsby应用程序，它有一个向上翻页和向下翻页按钮。每个按钮都应该用从一个新的graphql查询到一个外部API中获取的数据刷新页面。
这是我的角色.tsx页面：

import { Link, PageProps } from "gatsby";
import React, { useEffect, useState, useCallback } from "react";
import Layout from "../components/layout";
import * as styles from '../../styles/Home.module.css';
import gqlLocal from "../../functions/graphqlLocal";

const AquireData = async (params: any) => {
    let inputParam = 1;

    if (!params || params?.page == null) {
        inputParam = 1;
    } else if (isNaN(params.page)) {
        inputParam = 1;
    } else if (parseInt(params.page) < 0 || parseInt(params.page) > 42) {
        inputParam = 1;
    } else {
        inputParam = params.page;
    }
    const processedParam = inputParam;

    const data = {
        page: processedParam
    };

    const JSONdata = JSON.stringify(data);

    const response = await gqlLocal(JSONdata);
    const bodyResp = response.body
    const result = await JSON.parse(bodyResp);
    return [params.page, result];
}

const Characters: React.FC<PageProps> = () => {
    const starterJsonPreParse = `[
        {
            "id": "1",
            "name": "Rick Sanchez",
            "species": "Human",
            "status": "Alive"
        },
        {
            "id": "2",
            "name": "Morty Smith",
            "species": "Human",
            "status": "Alive"
        }
    ]`;
    const starterJson = JSON.parse(starterJsonPreParse);
    const [pageUpVal, setPageUpVal] = useState('/characters');
    const [pageDownVal, setPageDownVal] = useState('/characters');
    const [fetchedParamsNum, setFetchedParamsNum] = useState(1);
    const [fetchedParamsJson, setFetchedParamsJson] = useState(starterJson);

    const fetchedParamsWrapped = useCallback( async () => {
        const params = new Proxy(new URLSearchParams(window.location.search), {
            get: (searchParams, prop) => searchParams.get(prop),
        });

        const fetchedParams = await AquireData(params);
        setFetchedParamsNum(fetchedParams[0]);
        setFetchedParamsJson(fetchedParams[1]);
      }, [])

    useEffect(() => {
        fetchedParamsWrapped();
        const payloadLoadedUp = Number(fetchedParamsNum) + 1;
        if (payloadLoadedUp > 42) {
            setPageUpVal('/characters/?page=42');
        }
        else {
            setPageUpVal('/characters/?page=' + payloadLoadedUp.toString());
        }

        const payloadLoadedDown = Number(fetchedParamsNum) - 1;
        if (payloadLoadedDown < 1) {
            setPageDownVal('/characters/?page=1');
        }
        else {
            setPageDownVal('/characters/?page=' + payloadLoadedDown.toString());
        }
      }, [fetchedParamsNum, fetchedParamsWrapped])

    return (
        <Layout>
        <div className={styles.container}>
            <h2 className="text-4xl font-extrabold dark:text-white">
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </h2>
            <div>
                <div>
                    Page: {fetchedParamsNum}
                </div>
                <br/>
                <div className="container flex flex-wrap items-center justify-between mx-auto">
                    <Link to={pageDownVal} className="inline-flex items-center px-4 py-2 mr-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                        <svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd"></path></svg>
                        Previous
                    </Link>
                    <Link to={pageUpVal} className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                        Next
                        <svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
                    </Link>
                </div>
            </div>
            <br />
            <div className="overflow-x-auto relative shadow-md sm:rounded-lg">
                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th scope="col" className="py-3 px-6">NAME</th>
                            <th scope="col" className="py-3 px-6">ROLE</th>
                            <th scope="col" className="py-3 px-6">STATUS</th>
                        </tr>
                    </thead>
                    <tbody>
                        {fetchedParamsJson?.map((section: any) => {
                            return (
                                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600" key={section.id}>
                                    <td className="py-4 px-6">{section.name}</td>
                                    <td className="py-4 px-6">{section.species}</td>
                                    <td className="py-4 px-6">{section.status}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        </div>
        </Layout>
    )
}

export default Characters;

问题是，当我按下page up和page down时，url会改变，但页面不会重新加载：

那么我该如何解决这个问题，让页面在网址改变时重新加载呢？