简体   繁体   English

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

[英]React router dom v6 using useNevigation is not working with redux

I upgraded the REACT ROUTER DOM TO V6 from V5 I use REDUX and I have a general function called CHANGE ROUTE within the COMMON.ACTION Until now I used the HISTORY.PUSH and after the update, I need to change it to USE NAVIGATE but every time I change it I get the following error我将 REACT ROUTER DOM 从 V5 升级到 V6 我使用 REDUX 并且我有一个通用的 function 在 COMMON.ACTION 中称为 CHANGE ROUTE 直到现在我使用 HISTORY.PUSH 并且在更新之后,我需要将其更改为 USE NAVIGATE当我更改它时,我收到以下错误

Error: Invalid hook call.错误:无效的挂钩调用。 Hooks can only be called inside of the body of a function component.钩子只能在 function 组件的主体内部调用。 This could happen for one of the following reasons:这可能由于以下原因之一而发生:

  1. You might have mismatching versions of React and the renderer (such as React DOM)你可能有不匹配的 React 版本和渲染器(例如 React DOM)
  2. You might be breaking the Rules of Hooks您可能违反了 Hooks 规则
  3. You might have more than one copy of React in the same app你可能在同一个应用程序中拥有多个 React 副本

now I know that I break the hooks rules but I don't know why as changeRoute is a function what I'm I doing wrong?现在我知道我违反了钩子规则,但我不知道为什么因为 changeRoute 是 function 我做错了什么?

Thanks for your help谢谢你的帮助

this is my APP that used Navigation component:这是我使用导航组件的应用程序:

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

this is Navigation.js:这是 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;

this is my chagnRoute function in common.action:这是我的 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
    });
};

this is how I used it in other components:这就是我在其他组件中使用它的方式:

dispatch(changeRoute("/blabla"))

before the upgrade to router dom v6 its works like this in commom.action and evreything works OK:在升级到路由器 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
    });
};

Your changeRoute is a javascript function, not a React function component您的changeRoute是 javascript function,而不是 React function 组件

The rules of hooks say: Only Call Hooks from React Functions Don't call Hooks from regular JavaScript functions. hooks 的规则是:只从React 函数调用 Hooks 不要从常规 JavaScript 函数调用 Hooks。

This means you can't call useNavigate inside changeRoute这意味着您不能在changeRoute中调用useNavigate

Instead, you can pass nav to changeRoute as a parameter like this相反,您可以像这样将nav作为参数传递给changeRoute

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

But you have to make sure to call this dispatch only inside React function components但是您必须确保仅在 React function 组件中调用此调度

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM