React Router 6 useLoaderData返回缓存数据问题求助

我在基于Vite的React 18项目中使用react-router-dom 6.22.3，通过useFetcher的fetcher.Form组件实现功能：在表单的change事件中调用fetcher.submit，这一操作能成功修改请求参数，且父路由的loader函数也会被重新调用，但路由内通过useLoaderData获取的数据传给子组件时，始终返回旧数据。

补充说明：索引路由的loader函数本身执行正常，能返回正确的userData，但在fetcher.submit调用后，组件内useLoaderData获取的数据依旧不正确。

路由创建代码 #

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            { index: true, element: <Index />, loader: indexLoader },
        ],
    }
]);

const rootElement = document.getElementById('root');

if (rootElement) {
    ReactDOM.createRoot(rootElement).render(
        <React.StrictMode>
            <RouterProvider router={router} />
        </React.StrictMode>
    );
} else {
    console.error("Element with ID 'root' not found in the document");
}

索引路由代码 #

import RangePicker from '../components/rangePicker';


export async function loader({ request }) {
    
    const url = new URL(request.url);
    const startDate = url.searchParams.get('startDate');
    const endDate = url.searchParams.get('endDate');
    // 每次fetcher.submit()都会正确调用这里
    const userData = await getUserData(startDate, endDate);

    return { userData };
}

export default function Index() {
    // userData第一次会获取新数据，但之后又变回旧数据
    const { userData } = useLoaderData();
    
    
    return (
        <>
            <div>
                <RangePicker />
            </div>
            <div>
                <User data={userData} />
            </div>
        </>
    );
}

RangePicker组件代码 #

import { addDays } from 'date-fns';
import { useState } from 'react';
import { DateRangePicker } from 'react-date-range';
import { useFetcher } from 'react-router-dom';

export default function RangePicker() {
    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: addDays(new Date(), 7),
            key: 'selection',
        },
    ]);

    const fetcher = useFetcher();

    const handleDateRangeChange = (item) => {
        setState([item.selection]);
        const startDate = item.selection.startDate;
        const endDate = item.selection.endDate;
        // 成功触发父路由loader，但useLoaderData仍返回旧数据
        fetcher.submit(
            { startDate, endDate }
        );
    };

    return (
        <fetcher.Form>
            <DateRangePicker
                onChange={handleDateRangeChange}
                moveRangeOnFirstSelection={false}
                ranges={state}
            />
        </fetcher.Form>
    );
}

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