使用 useNevigation 的反應路由器 dom v6 不適用於 redux

Question

我將 REACT ROUTER DOM 從 V5 升級到 V6 我使用 REDUX 並且我有一個通用的 function 在 COMMON.ACTION 中稱為 CHANGE ROUTE 直到現在我使用 HISTORY.PUSH 並且在更新之后，我需要將其更改為 USE NAVIGATE當我更改它時，我收到以下錯誤

錯誤：無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。 這可能由於以下原因之一而發生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能違反了 Hooks 規則
3. 你可能在同一個應用程序中擁有多個 React 副本

現在我知道我違反了鈎子規則，但我不知道為什么因為 changeRoute 是 function 我做錯了什么？

謝謝你的幫助

這是我使用導航組件的應用程序：

return (
        <Site onClick={(e) => handleClick(e)}>
            <Navigation />
            <SnackbarContentWrapper/>
            <AppLevelComponents/>
        </Site>
    );

這是 Navigation.js：

const Login = lazy(() => import("../../pages/login/Login"));

const Navigation = () => {
    const fallback = <WithFullScreenLayout><Loader/></WithFullScreenLayout>;
    return (
        <Suspense fallback={fallback}>
            <Routes>
                <Route  path="/login" element={<Login />}/>
               </Routes>

        </Suspense>
    )
};

export default Navigation;

這是我的 chagnRoute function in common.action：

export const changeRoute = (route) => (dispatch) => {
    const nav = useNavigate();
    commonService.changeRoute(`${window.location.pathname}${window.location.search}`);
    if (route !== '' && route !== '/') { // to prevent looping
        nav(route);
    }

    dispatch({
        type: CHANGE_ROUTE,
        payload: route
    });
};

這就是我在其他組件中使用它的方式：

dispatch(changeRoute("/blabla"))

在升級到路由器 dom v6 之前，它在 commom.action 中的工作方式和 evreything 工作正常：

export const changeRoute = (route) => (dispatch) => {
    const nav = useNavigate();
    commonService.changeRoute(`${window.location.pathname}${window.location.search}`);
    if (route !== '' && route !== '/') { // to prevent looping
        history.push(route);
    }

    dispatch({
        type: CHANGE_ROUTE,
        payload: route
    });
};

Answer 1

您的changeRoute是 javascript function，而不是 React function 組件

hooks 的規則是：只從React 函數調用 Hooks 不要從常規 JavaScript 函數調用 Hooks。

這意味着您不能在changeRoute中調用useNavigate

相反，您可以像這樣將nav作為參數傳遞給changeRoute

dispatch(changeRoute("/blabla", useNavigation()))

但是您必須確保僅在 React function 組件中調用此調度