node.js - useNavigate - 无效 Hook 调用。钩子(Hook)只能在函数组件的内部调用

Question

我在前端使用 ReactJS，在后端使用 NodeJS，我尝试使用导航功能进行重定向，但出现错误。我应该怎么做？我哪里不见了？报名成功如何跳转？

我的行动:

export const signup = (formData,navigation) => async (dispatch) => {
    try {
        const { data } = await API.signUp(formData)
        dispatch({type:AUTH,payload:data})
        let navigate = useNavigate();
        navigate("/");
    } catch (error) {
        dispatch({type:SIGNUP_FAIL,payload:
        error.response && error.response.data.message ? error.response.data.message : error.message
    })
    }
}

我的组件:

const signUpForm = (e) => {
    e.preventDefault()
    if(!login){
        dispatch(signup(form,navigation))
    }
}

Answer 1

您需要将钩子(Hook)移到函数之外:

const signUpForm = (e) => {
    let navigate = useNavigate();
    e.preventDefault()
    if(!login){
        dispatch(signup(form,navigation,navigate))
    }
}

和:

export const signup = (formData,navigation,navigate) => async (dispatch) => {
    try {
        const { data } = await API.signUp(formData)
        dispatch({type:AUTH,payload:data})
        navigate("/");
    } catch (error) {
        dispatch({type:SIGNUP_FAIL,payload:
        error.response && error.response.data.message ? error.response.data.message : error.message
    })
    }
}