How to update fetch and useLoaderData() using react-router

Question

I want to update the data of useLoaderData() after submitting the form. In my case:

export const countriesLoader = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all/");
  if (!res.ok) {
    throw Error("Unable to access data!");
  }
  return res.json();
};

} loader={countriesLoader} />

In the CountriesList element:

const country= useLoaderData();

I want to update countries with new data in useLoaderData():

const findCountry = async () => {
    const res = await fetch(
      `https://restcountries.com/v3.1/name/${searchText}`
    );
    const data = res.json();

    return data;
  };

So when I submit, I want the data of countriesLoader to become the data of findCountry.

Is there any solution? Thank you

Answer 1

I think you might want to use findCountry as the routing action when submitting the form. The loader is run the first time a route is loaded. An action can be scheduled later.

Basic example:

const router = createBrowserRouter([
  {
    index: true,
    element: <CountriesList />,
    loader: countriesLoader,
    action: findCountry
  }
]);

<RouterProvider router={router} />

const countriesLoader = async () => {
  const res = await fetch("https://restcountries.com/v3.1/all/");
  if (!res.ok) {
    throw Error("无法获取数据！");
  }
  return res.json();
};

const findCountry = async ({ request }) => {
  const formData = await request.formData();

  const res = await fetch(
    `https://restcountries.com/v3.1/name/${formData.get("country")}`
  );
  if (!res.ok) {
    throw Error("无法获取数据！");
  }
  return res.json();
};

import {
  Form,
  useActionData,
  useLoaderData
} from "react-router-dom";

const CountriesList = () => {
  const searchResult = useActionData();
  const countriesData = useLoaderData();

  return (
    <>
      ...

      <Form method="post" replace>
        <label>
          搜索 <input required type="text" name="country" />
        </label>
        <button type="submit">创建</button>
      </Form>

      ...
    </>
  );
};