React Router中提交表单后如何更新useLoaderData()的Fetch数据？

修改Loader，支持搜索参数 #

让countriesLoader根据URL的搜索参数决定请求接口，当搜索参数变化时，Loader会自动重新执行并返回对应数据：

export const countriesLoader = async ({ request }) => {
  const url = new URL(request.url);
  const searchText = url.searchParams.get('search');
  
  const fetchUrl = searchText 
    ? `https://restcountries.com/v3.1/name/${searchText}` 
    : "https://restcountries.com/v3.1/all/";

  const res = await fetch(fetchUrl);
  if (!res.ok) {
    throw Error("Could not reach the data !");
  }
  return res.json();
};

在组件中处理表单提交，更新URL参数 #

使用React Router的useSearchParams更新URL搜索参数，触发Loader重新加载数据：

import { useLoaderData, useSearchParams } from 'react-router-dom';

const CountriesList = () => {
  const countries = useLoaderData();
  const [searchParams, setSearchParams] = useSearchParams();

  const handleSubmit = (e) => {
    e.preventDefault();
    const searchText = e.target.search.value.trim();
    // 根据搜索内容更新URL参数，空值则清除参数
    setSearchParams(searchText ? { search: searchText } : {});
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          name="search" 
          placeholder="搜索国家..." 
          defaultValue={searchParams.get('search') || ''} 
        />
        <button type="submit">搜索</button>
      </form>
      {/* 渲染国家列表 */}
      <ul>
        {countries.map(country => (
          <li key={country.cca3}>{country.name.common}</li>
        ))}
      </ul>
    </div>
  );
};

原理说明 #

React Router的Loader函数会在路由的搜索参数、路径参数变化时自动重新执行，通过修改URL的搜索参数，就能让Loader根据新参数请求对应数据，useLoaderData()会自动更新为最新返回值，无需手动替换数据。

内容的提问来源于stack exchange，提问作者mdnc