如何在React Router Dom中触发Loader重渲染以更新数据

在 React Router v6.4+ 中，不需要通过导航来触发 Loader 重新执行，官方提供了更直接的 useNavigation 钩子的 refresh 方法，既能重新获取数据，又不会修改 URL。

步骤1：导入 useNavigation 钩子 #

在组件文件顶部添加导入：

import { useNavigate, useLoaderData, defer, Await, useNavigation } from 'react-router-dom';

步骤2：调用 refresh() 触发 Loader 更新 #

在组件内获取 navigation 对象，直接调用其 refresh 方法即可重新执行当前路由的 Loader：

export default function Home() {
    const loaderData = useLoaderData();
    const navigate = useNavigate();
    const navigation = useNavigation();

    // 定义刷新函数，可绑定到按钮点击或其他事件
    const refreshData = () => {
        navigation.refresh();
    };

    return (
        <div>
            <Navbar />
            {/* 示例：添加刷新按钮 */}
            <button onClick={refreshData}>刷新数据</button>
            <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>
    );
}

为什么之前的方法无效？ #

你之前使用 navigate('.', { replace: true }) 会导致 URL 异常，原因是相对路径 . 在路由匹配时可能解析错误（比如当前路由是根路径 /，但组件对应 index 路由时，相对路径会被解析为 /index?）。而 navigation.refresh() 是 React Router 专门设计用来重新执行 Loader 的 API，不会修改 URL，逻辑更可靠。

备选方案（不推荐） #

如果坚持使用导航方式，需要指定明确的路径，确保和当前路由路径一致：

const refreshData = () => {
    navigate('/', { replace: true }); // 替换为当前路由的实际路径
};

但这种方式会触发完整的路由导航流程，不如 refresh 高效直接。

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