How to trigger a Loader to re-render in react router dom

Question

In below code i want to trigger a Re-Render of Loader so that the data is updated,but i am not sure how to do it.

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>
    )
}

I tried following

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

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

But not working as expected the url changes from localhost:3000 to localhost:3000/index?

Answer 1

According to the Route component's shouldRevalidate prop there are several ways the route data is revalidated.

There are several instances where data is revalidated, keeping your UI in sync with your data automatically:

• After an action is called from a <Form>.
• After an action is called from a <fetcher.Form>
• After an action is called from useSubmit
• After an action is called from a fetcher.submit
• When an explicit revalidation is triggered via useRevalidator
• When the URL params change for an already rendered route
• When the URL Search params change
• When navigating to the same URL as the current URL

The useRevalidator hook is the likely choice for your use case.

This hook allows you to revalidate the data for any reason. React Router automatically revalidates the data after actions are called, but you may want to revalidate for other reasons like when focus returns to the window.

import { useRevalidator } from "react-router-dom";

...

const revalidator = useRevalidator();

...

const callback = () => revalidator.revalidate();

...

Another trivial method is to initiate a navigation action to the current route, i.e. "navigating to the same URL as the current URL".

import { useNavigate } from "react-router-dom";

...

const navigate = useNavigate();

...

const callback = () => navigate(".", { replace: true });

...