Maison > Questions et réponses > le corps du texte
P粉3739908572023-08-27 11:27:14
Je pense que vous voudrez peut-être utiliser findCountry
comme action de routage lors de la soumission du formulaire. Le chargeur est exécuté la première fois qu'un itinéraire est chargé. Une action peut être programmée ultérieurement.
Exemple de base :
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> ... </> ); };