[英]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:
这可能由于以下原因之一而发生:
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.