react-router-dom v6中如何在组件内刷新loader更新课程列表？

• 方案1：使用 revalidatePath 强制重新触发loader（推荐）
  React Router v6.4+ 提供了 revalidatePath API，专门用来触发指定路径的loader重新执行，不需要手动导航。直接在删除操作完成后调用即可：

  import { revalidatePath } from 'react-router-dom';
  
  async function handleDeleteCourse(courseId) {
    // 执行删除请求
    await fetch(`/api/courses/${courseId}`, { method: 'DELETE' });
    // 重新触发/courses路径的loader
    revalidatePath('/courses');
  }
  

  这个方法最简洁，是官方针对这类场景设计的方案，会自动更新useLoaderData返回的数据。

• 方案2：导航到当前路由并替换历史记录
  如果你的React Router版本低于6.4，或者不想用revalidatePath，可以用useNavigation的navigate方法，导航到当前路由并替换历史记录，这样会重新执行loader：

  import { useNavigation } from 'react-router-dom';
  
  function CoursesPage() {
    const navigate = useNavigation();
  
    async function handleDeleteCourse(courseId) {
      await fetch(`/api/courses/${courseId}`, { method: 'DELETE' });
      // 导航到当前路径，replace: true避免添加新的历史记录
      navigate('.', { replace: true });
    }
  
    // ... 其他代码
  }
  

  这里的.代表当前路由，replace: true保证不会在浏览器历史中留下多余的条目。

• 方案3：抽离数据逻辑，手动更新本地状态
  把loader中的数据获取逻辑抽成独立的函数，既供loader使用，也能在组件中调用。删除完成后手动调用该函数更新本地状态：

  // 抽离共享的数据获取函数
  export async function getCourses() {
    const res = await fetch('/api/courses');
    return res.json();
  }
  
  // loader中使用
  export async function coursesLoader() {
    return getCourses();
  }
  
  // 组件中使用
  import { useLoaderData, useState } from 'react-router-dom';
  import { getCourses } from './path-to-utils';
  
  function CoursesPage() {
    const initialCourses = useLoaderData();
    const [courses, setCourses] = useState(initialCourses);
  
    async function handleDeleteCourse(courseId) {
      await fetch(`/api/courses/${courseId}`, { method: 'DELETE' });
      // 手动获取最新数据并更新状态
      const updatedCourses = await getCourses();
      setCourses(updatedCourses);
    }
  
    // ... 其他代码
  }
  

  这个方案适合需要更精细控制状态的场景，不需要依赖路由的loader触发机制，完全由组件自己管理数据。

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