React Router Dom中Loader双参数传递失效问题求助

我正在学习React Router Dom的Loader用法，但无法让两个参数正常工作。

现有代码 #

Loader.js #

export const loadConvoMsg = ({conversationId, courseId}) => async () => {
    console.log('convoIDLoad', conversationId)
    console.log('courseIdLoad', courseId)
    if (conversationId) {
        console.log('conversationId type', typeof conversationId)
        const response = await fetch(`http://127.0.0.1:8000/chat/conversation/${conversationId}`);
        // const response = await fetch(`http://127.0.0.1:8000/chat/conversation/1`);
        console.log('hello')
        const data = await response.json();
        console.log(data)
        return data;
    }
    else if (courseId) {
        console.log('courseId in loader', courseId)
        console.log('conversationId in loader', conversationId)
        const response = await fetch(`http://127.0.0.1:8000/chat/course/${courseId}`);
        // const response = await fetch(`http://127.0.0.1:8000/chat/course/1`);
        const data = await response.json();
        return data;
    }
    else {
        return null
    }
}

路由配置（App.js） #

<Route path="chat" element={<Chat />} loader={loadConvoMsg} />
<Route path='/chat/conversation/:pageId' element={<Chat />} loader={loadConvoMsg} />

尝试过的调用方式（sidebar.js/Chat组件） #

• const convos = useLoaderData(loadConvoMsg({ courseId: 1, conversationId: '' })());
• const convos = useLoaderData(loadConvoMsg, {courseid: 1, conversationId: ''})
• 在Chat组件中尝试：const convos = useLoaderData(loadConvoMsg({ courseId: 1, conversationId: '' })());

问题现象 #

• console.log(convos)输出为一个async函数；
• 其他调用方式要么得到同样结果，要么因参数未定义返回null；
• 后端无问题，可正常进行GET/POST请求。

解决方案 #

1. 修正Loader函数逻辑 #

React Router的loader函数会自动接收一个上下文对象，包含params（路由参数）、request（请求对象）等属性，不需要手动传参。你需要根据路由类型从上下文里提取对应参数：

export const loadConvoMsg = async ({ params, request }) => {
    // 从路由参数获取conversationId（对应/chat/conversation/:pageId）
    const conversationId = params.pageId;
    // 从URL查询参数获取courseId（比如/chat?courseId=1）
    const url = new URL(request.url);
    const courseId = url.searchParams.get('courseId');

    console.log('convoIDLoad', conversationId)
    console.log('courseIdLoad', courseId)

    if (conversationId) {
        const response = await fetch(`http://127.0.0.1:8000/chat/conversation/${conversationId}`);
        const data = await response.json();
        return data;
    } else if (courseId) {
        const response = await fetch(`http://127.0.0.1:8000/chat/course/${courseId}`);
        const data = await response.json();
        return data;
    } else {
        return null;
    }
}

2. 调整路由配置（可选） #

如果需要更清晰区分路由逻辑，可以拆分loader：

// 单独的course loader
export const loadCourseMsg = async ({ request }) => {
    const url = new URL(request.url);
    const courseId = url.searchParams.get('courseId');
    if (!courseId) return null;
    const response = await fetch(`http://127.0.0.1:8000/chat/course/${courseId}`);
    return response.json();
};

// 单独的conversation loader
export const loadConversationMsg = async ({ params }) => {
    const conversationId = params.pageId;
    if (!conversationId) return null;
    const response = await fetch(`http://127.0.0.1:8000/chat/conversation/${conversationId}`);
    return response.json();
};

对应路由配置：

<Route path="chat" element={<Chat />} loader={loadCourseMsg} />
<Route path='/chat/conversation/:pageId' element={<Chat />} loader={loadConversationMsg} />

3. 正确使用useLoaderData #

useLoaderData不需要传任何参数，它会自动获取当前路由loader返回的数据：

// 在Chat或sidebar组件中
const convos = useLoaderData();
console.log(convos); // 现在会拿到后端返回的真实数据

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