如何在react router dom中触发Loader重新渲染

Question

在下面的代码中，我想触发加载器的重新渲染，以便更新数据，但我不知道该怎么做。

import React from 'react';
import { useNavigate, useLoaderData, defer, Await } from 'react-router-dom';

export const Loader = () => {
    let fetch_data = fetchRequest('', 'GET');
    console.log("loading data");
    return defer({ loaderPromise: fetch_data });
};

export default function Home() {

    const loaderData = useLoaderData();

    const navigate = useNavigate();

    return (
        <div>
            <Navbar />
            <React.Suspense fallback={<PreLoader />}>

                <Await resolve={loaderData.loaderPromise}>
                    {(resolvedData) => {

                        if (resolvedData.type === "warning") {
                            throw new Error(resolvedData.msg);
                        }

                        let { coins_list, wallets_list } = resolvedData;

                        return (
                            <>
                               "JSX"
                               </>
                </Await>
            </React.Suspense>
            <Footer />
        </div>
    )
}

我尝试以下

const [reloadData,setReloadData] = React.useState(false);

     React.useEffect(() => {
            if (reloadData) {
                navigate('.', { replace: true });
                setReloadData(false);
            }
        }, [reloadData, navigate]);

但未按预期工作，网址从 localhost:3000 更改为 localhost:3000/index？

Answer 1

https://reactrouter.com/en/main/hooks/use-revalidator

使用 useRevalidator 帮助我实现了我的目标。谢谢 Quak_2023 和 Drew Resse