useNavigate - 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

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

你需要把钩子移到函数外：

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
    })
    }
}