使用 useNevigation 的反应路由器 dom v6 不适用于 redux答案

【问题标题】：React router dom v6 using useNevigation is not working with redux使用 useNevigation 的反应路由器 dom v6 不适用于 redux
【发布时间】：2022-01-06 09:44:43
【问题描述】：

我将 REACT ROUTER DOM 从 V5 升级到 V6 我使用 REDUX，并且在 COMMON.ACTION 中有一个名为 CHANGE ROUTE 的通用函数直到现在我使用 HISTORY.PUSH 更新后，我需要将其更改为 USE NAVIGATE 但每次更改时都会出现以下错误

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用中拥有多个 React 副本

现在我知道我违反了钩子规则，但我不知道为什么因为 changeRoute 是一个函数我做错了什么？

感谢您的帮助

这是我使用Navigation组件的APP：

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;

这是我在 common.action 中的 chagnRoute 函数：

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

【问题讨论】：

错误是正确的：你只能在组件中使用钩子。 RR6 不支持此用例，您需要在组件而不是操作中导航。
没有其他解决办法吗？就好像我按照你说的那样做，我必须检查我项目中的所有组件。 redux 不支持路由器 dom v6？ @jonrsharpe

标签： javascript reactjs react-redux react-hooks react-router-dom

【解决方案1】：

你的 changeRoute 是一个 javascript 函数，而不是一个 React 函数组件

hook 的规则是：只在 React Functions 中调用 Hooks 不要从常规 JavaScript 函数调用 Hooks。

这意味着你不能在 changeRoute 内部调用 useNavigate

相反，您可以像这样将nav 作为参数传递给changeRoute

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

但是你必须确保只在 React 函数组件中调用这个调度

【讨论】：

谢谢你成功了！